Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg version="1.1" id="mittens" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="286px" height="380px" viewBox="0 0 286 380" enable-background="new 0 0 286 380" xml:space="preserve">

         <g class="mitten_left">
	
             <path class="left_string" fill="#5B4831" d="M90.963,77.726L72.86,207.13c-0.209,1.37-1.416,2.367-2.867,2.384l0,0
		c-0.139,0-0.278,0-0.414-0.016l0,0c-1.624-0.214-2.73-1.6-2.522-3.102l0,0L87.06,63.555l2.798-0.186"></path>
	
             <path class="glove_1" fill="#09B0A6" d="M113.38,210.824l-59.726-19.3l-10.881,21.93l-0.275,0.767l-25.147,7.666
		c-6.46,1.962-10.018,8.516-7.911,14.626c2.07,6.115,8.979,9.48,15.477,7.518l7.668-2.351l-6.254,17.338
		c-6.182,17.113,3.492,35.712,21.557,41.548c18.065,5.847,37.72-3.288,43.905-20.385L113.38,210.824z"></path>
	
             <g class="dots_1">
		
                 <path fill="#F5ECC3" d="M60.184,211.246c-0.518,1.441-2.247,2.175-3.903,1.638c-1.625-0.526-2.557-2.126-2.038-3.551
			c0.518-1.436,2.282-2.154,3.903-1.633C59.801,208.243,60.702,209.826,60.184,211.246z"></path>
		
                 <path fill="#F5ECC3" d="M70.132,214.468c-0.521,1.436-2.247,2.159-3.903,1.633c-1.659-0.537-2.557-2.126-2.038-3.562
			c0.516-1.419,2.279-2.159,3.903-1.617C69.75,211.443,70.648,213.027,70.132,214.468z"></path>
		
                 <path fill="#F5ECC3" d="M80.082,217.685c-0.521,1.425-2.247,2.159-3.903,1.622c-1.662-0.526-2.56-2.11-2.038-3.545
			c0.515-1.425,2.244-2.159,3.903-1.622C79.699,214.665,80.597,216.249,80.082,217.685z"></path>
		
                 <path fill="#F5ECC3" d="M90.028,220.89c-0.518,1.436-2.279,2.175-3.903,1.633c-1.659-0.521-2.557-2.104-2.035-3.545
			c0.515-1.436,2.244-2.159,3.903-1.633C89.649,217.882,90.546,219.454,90.028,220.89z"></path>
		
                 <path fill="#F5ECC3" d="M99.977,224.112c-0.518,1.436-2.279,2.17-3.903,1.633c-1.659-0.543-2.557-2.126-2.038-3.562
			c0.518-1.425,2.244-2.159,3.903-1.622C99.597,221.087,100.495,222.671,99.977,224.112z"></path>
		
                 <path fill="#F5ECC3" d="M38.247,263.528c-0.515,1.425-2.244,2.176-3.833,1.655c-1.587-0.509-2.484-2.093-1.969-3.534
			c0.518-1.436,2.247-2.17,3.834-1.649C37.868,260.525,38.768,262.092,38.247,263.528z"></path>
		
                 <path fill="#F5ECC3" d="M47.886,266.652c-0.518,1.419-2.244,2.159-3.836,1.633c-1.587-0.504-2.45-2.077-1.934-3.512
			c0.521-1.441,2.212-2.175,3.802-1.649C47.507,263.643,48.405,265.21,47.886,266.652z"></path>
		
                 <path fill="#F5ECC3" d="M57.526,269.759c-0.521,1.419-2.212,2.17-3.837,1.666c-1.59-0.526-2.452-2.11-1.934-3.529
			c0.518-1.441,2.209-2.175,3.834-1.671C57.178,266.75,58.041,268.334,57.526,269.759z"></path>
		
                 <path fill="#F5ECC3" d="M67.162,272.86c-0.521,1.458-2.212,2.192-3.799,1.666c-1.627-0.504-2.49-2.088-1.969-3.512
			c0.515-1.436,2.244-2.17,3.833-1.666C66.814,269.868,67.677,271.441,67.162,272.86z"></path>
		
                 <path fill="#F5ECC3" d="M76.833,276c-0.518,1.419-2.247,2.176-3.834,1.649c-1.59-0.52-2.487-2.093-1.969-3.529
			c0.518-1.425,2.247-2.176,3.833-1.649C76.454,272.991,77.351,274.559,76.833,276z"></path>
		
                 <path fill="#F5ECC3" d="M86.469,279.107c-0.515,1.436-2.244,2.17-3.834,1.666c-1.587-0.51-2.452-2.093-1.934-3.529
			c0.518-1.441,2.212-2.175,3.799-1.655C86.09,276.115,86.99,277.682,86.469,279.107z"></path>
	
             </g>
	
             <path class="star_1" fill="#F5ECC3" d="M73.138,245.012c13.505,10.658,9.222,14.987-3.249,3.496
		c1.969,16.362-4.248,16.916-4.905,0.296c-11.296,12.762-15.856,8.713-3.729-3.091c-17.272,1.88-17.859-4.017-0.313-4.658
		c-13.47-10.652-9.187-14.987,3.283-3.496c-2.003-16.373,4.248-16.916,4.905-0.296c11.261-12.763,15.856-8.724,3.695,3.074
		C90.132,238.475,90.72,244.376,73.138,245.012z"></path>

         </g>

         <g class="mitten_right">
	
             <path class="right_string" fill="#5B4831" d="M89.609,63.369l2.9-0.192l28.842,98.614c0.449,1.474-0.484,2.992-2.035,3.403l0,0
		c-1.558,0.405-3.144-0.46-3.562-1.929l0,0l-25.04-85.539"></path>
	
             <path class="glove" fill="#09B0A6" d="M85.641,173.578l59.208-20.626l11.432,21.672l0.278,0.751l25.353,7.091
		c6.498,1.83,10.227,8.302,8.293,14.467c-1.934,6.159-8.773,9.672-15.268,7.841l-7.775-2.17l6.703,17.206
		c6.599,16.965-2.557,35.777-20.486,42.019c-17.926,6.241-37.786-2.449-44.388-19.398L85.641,173.578z"></path>
	
             <g class="dots">
		
                 <path fill="#F5ECC3" d="M138.803,172.811c0.553,1.419,2.316,2.104,3.973,1.534c1.625-0.554,2.487-2.175,1.934-3.595
			c-0.55-1.408-2.314-2.11-3.938-1.534C139.15,169.786,138.253,171.386,138.803,172.811z"></path>
		
                 <path fill="#F5ECC3" d="M128.958,176.241c0.553,1.419,2.316,2.126,3.938,1.551c1.659-0.57,2.522-2.17,1.969-3.611
			c-0.55-1.403-2.314-2.093-3.973-1.518C129.271,173.233,128.408,174.833,128.958,176.241z"></path>
		
                 <path fill="#F5ECC3" d="M119.078,179.688c0.553,1.425,2.351,2.11,3.973,1.54c1.624-0.559,2.487-2.175,1.934-3.6
			c-0.55-1.419-2.313-2.104-3.938-1.534C119.426,176.668,118.528,178.268,119.078,179.688z"></path>
		
                 <path fill="#F5ECC3" d="M109.234,183.124c0.553,1.419,2.317,2.121,3.938,1.534c1.659-0.57,2.522-2.175,1.969-3.595
			c-0.55-1.425-2.314-2.11-3.938-1.54C109.546,180.099,108.684,181.699,109.234,183.124z"></path>
		
                 <path fill="#F5ECC3" d="M99.354,186.57c0.553,1.419,2.351,2.11,3.973,1.534c1.625-0.57,2.487-2.17,1.934-3.611
			c-0.55-1.403-2.314-2.093-3.938-1.518C99.702,183.546,98.804,185.146,99.354,186.57z"></path>
		
                 <path fill="#F5ECC3" d="M162.086,224.567c0.553,1.425,2.279,2.126,3.868,1.584c1.555-0.553,2.418-2.153,1.865-3.578
			c-0.553-1.419-2.279-2.11-3.868-1.567C162.361,221.559,161.533,223.148,162.086,224.567z"></path>
		
                 <path fill="#F5ECC3" d="M152.516,227.904c0.553,1.419,2.282,2.121,3.868,1.584c1.59-0.559,2.421-2.159,1.865-3.578
			c-0.55-1.425-2.276-2.126-3.868-1.573C152.794,224.896,151.966,226.496,152.516,227.904z"></path>
		
                 <path fill="#F5ECC3" d="M142.949,231.236c0.55,1.419,2.279,2.126,3.868,1.567c1.587-0.537,2.418-2.137,1.865-3.562
			c-0.553-1.419-2.282-2.11-3.868-1.567C143.224,228.228,142.396,229.811,142.949,231.236z"></path>
		
                 <path fill="#F5ECC3" d="M133.38,234.567c0.553,1.425,2.279,2.126,3.871,1.589c1.587-0.559,2.415-2.159,1.865-3.578
			c-0.556-1.425-2.282-2.11-3.868-1.573C133.689,231.565,132.827,233.148,133.38,234.567z"></path>
		
                 <path fill="#F5ECC3" d="M123.81,237.905c0.556,1.419,2.282,2.126,3.871,1.567c1.59-0.537,2.418-2.143,1.865-3.562
			c-0.553-1.425-2.279-2.126-3.868-1.567C124.123,234.896,123.26,236.496,123.81,237.905z"></path>
		
                 <path fill="#F5ECC3" d="M114.278,241.236c0.553,1.425,2.282,2.126,3.834,1.573c1.59-0.542,2.421-2.142,1.865-3.567
			c-0.55-1.419-2.279-2.121-3.868-1.567C114.556,238.228,113.725,239.817,114.278,241.236z"></path>
	
             </g>
	
             <path class="star" fill="#F5ECC3" d="M126.711,206.851c-13.192,10.965-8.843,15.184,3.353,3.414
		c-1.59,16.412,4.662,16.818,4.905,0.197c11.605,12.505,16.099,8.368,3.625-3.167c17.344,1.485,17.79-4.433,0.208-4.658
		c13.198-10.971,8.843-15.201-3.35-3.436c1.555-16.407-4.665-16.818-4.905-0.175c-11.608-12.505-16.062-8.373-3.628,3.151
		C109.581,200.692,109.13,206.604,126.711,206.851z"></path>

         </g>

         <g class="bow_left">
	
             <path fill="#5B4831" d="M65.537,67.018c-8.151-4.099-15.616-10.346-15.856-19.481l0,0c-0.032-2.269,0.414-4.641,1.381-7.058l0,0
		c2.178-5.869,6.081-9.447,10.916-9.48l0,0c7.702,0.197,13.852,6.926,19.415,14.138l0,0c5.458,7.37,9.671,15.508,10.878,20.494l0,0
		l-5.698,1.222c-0.828-3.595-4.905-11.781-9.949-18.533l0,0c-4.94-6.926-11.466-12.16-14.541-11.798l0,0
		c-1.622,0.066-3.489,0.882-5.559,5.869l0,0c-0.727,1.863-1.002,3.529-0.967,5.063l0,0c0,5.885,5.212,10.899,12.746,14.675l0,0
		c7.355,3.726,16.476,5.934,22.244,6.669l0,0l-0.793,5.474C83.327,73.457,73.827,71.172,65.537,67.018L65.537,67.018z"></path>

         </g>

         <g class="bow_right">
	
             <path fill="#5B4831" d="M93.239,72.493v-1.896l-4.731,0.849c-0.104-0.554-0.174-1.156-0.174-1.781l0,0
		c-0.032-5.195,2.73-12.795,6.703-19.705l0,0c4.109-6.718,8.982-13.075,16.166-13.519l0,0c2.004-0.049,4.077,0.636,5.803,1.929l0,0
		c2.971,2.126,4.459,5.261,4.459,8.335l0,0c0,6.324-4.598,12.291-10.018,17.13l0,0c-5.527,4.784-11.883,8.466-17.651,8.658l0,0
		C93.552,72.509,93.378,72.493,93.239,72.493L93.239,72.493z M100.148,52.64c-2.832,4.817-4.972,10.488-5.698,14.28l0,0
		c3.144-0.373,8.669-3.2,13.024-7.124l0,0c4.87-4.187,8.325-9.661,8.154-13.009l0,0c-0.07-1.633-0.556-2.778-2.212-4.038l0,0
		c-0.863-0.619-1.453-0.767-2.143-0.767l0,0c-0.069-0.017-0.174-0.017-0.243-0.017l0,0C108.51,41.998,103.535,46.524,100.148,52.64
		L100.148,52.64z"></path>

         </g>

         <g class="trail">
	
             <path fill="#5B4831" d="M54.555,111.963c-1.593-0.329-2.594-1.797-2.247-3.304l0,0C57.386,85.387,67.92,75.896,91.03,68.328l0,0
		c1.52-0.526,3.179,0.23,3.732,1.666l0,0c0.55,1.436-0.243,3.025-1.764,3.545l0,0c-22.385,7.863-29.601,14.121-34.992,36.314l0,0
		c-0.275,1.277-1.483,2.159-2.797,2.175l0,0C55.001,112.029,54.76,112.013,54.555,111.963L54.555,111.963z"></path>

         </g>

</svg>
              
            
!

CSS

              
                #advent_calendar .advent_treat, #advent_calendar .advent_darken {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000; }

.advent_button span,
.advent_button a {
  font-family: "TypewriterSerial"; }

@-webkit-keyframes scale {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1; } }

@-moz-keyframes scale {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1; } }

@keyframes scale {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 1; }

  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1; } }

@-webkit-keyframes swing {
  0% {
    -webkit-transform: rotate(0deg); }

  50% {
    -webkit-transform: rotate(10deg); }

  100% {
    -webkit-transform: rotate(0deg); } }

@-moz-keyframes swing {
  0% {
    -moz-transform: rotate(0deg); }

  50% {
    -moz-transform: rotate(10deg); }

  100% {
    -moz-transform: rotate(0deg); } }

@keyframes swing {
  0% {
    transform: rotate(0deg); }

  50% {
    transform: rotate(10deg); }

  100% {
    transform: rotate(0deg); } }

@-webkit-keyframes star-blink {
  0% {
    -webkit-transform: scale(0) rotate(0deg); }

  45% {
    -webkit-transform: scale(0) rotate(164.25deg); }

  50% {
    -webkit-transform: scale(1) rotate(180deg); }

  95% {
    -webkit-transform: scale(1) rotate(346.75deg); }

  100% {
    -webkit-transform: scale(0) rotate(365deg); } }

@-moz-keyframes star-blink {
  0% {
    -moz-transform: scale(0) rotate(0deg); }

  45% {
    -moz-transform: scale(0) rotate(164.25deg); }

  50% {
    -moz-transform: scale(1) rotate(180deg); }

  95% {
    -moz-transform: scale(1) rotate(346.75deg); }

  100% {
    -moz-transform: scale(0) rotate(365deg); } }

@keyframes star-blink {
  0% {
    transform: scale(0) rotate(0deg); }

  45% {
    transform: scale(0) rotate(164.25deg); }

  50% {
    transform: scale(1) rotate(180deg); }

  95% {
    transform: scale(1) rotate(346.75deg); }

  100% {
    transform: scale(0) rotate(365deg); } }

@-webkit-keyframes jump {
  0%, 5%, 25%, 100% {
    -webkit-transform: translateY(0px); }

  15% {
    -webkit-transform: translateY(-5px); } }

@-moz-keyframes jump {
  0%, 5%, 25%, 100% {
    -moz-transform: translateY(0px); }

  15% {
    -moz-transform: translateY(-5px); } }

@keyframes jump {
  0%, 5%, 25%, 100% {
    transform: translateY(0px); }

  15% {
    transform: translateY(-5px); } }

.green_bulb {
  -webkit-animation: green-to-blue 0.5s ease 4s infinite alternate;
  -moz-animation: green-to-blue 0.5s ease 4s infinite alternate;
  -ms-animation: green-to-blue 0.5s ease 4s infinite alternate;
  animation: green-to-blue 0.5s ease 4s infinite alternate; }

.green_1 {
  opacity: 0;
  -webkit-animation: scale 0.3s ease 0.15s forwards;
  -moz-animation: scale 0.3s ease 0.15s forwards;
  -ms-animation: scale 0.3s ease 0.15s forwards;
  animation: scale 0.3s ease 0.15s forwards;
  -webkit-transform-origin: 171px 262px;
  -moz-transform-origin: 171px 262px;
  -ms-transform-origin: 171px 262px;
  transform-origin: 171px 262px; }

.green_2 {
  opacity: 0;
  -webkit-animation: scale 0.3s ease 0.65s forwards;
  -moz-animation: scale 0.3s ease 0.65s forwards;
  -ms-animation: scale 0.3s ease 0.65s forwards;
  animation: scale 0.3s ease 0.65s forwards;
  -webkit-transform-origin: 109px 250px;
  -moz-transform-origin: 109px 250px;
  -ms-transform-origin: 109px 250px;
  transform-origin: 109px 250px; }

.green_3 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 1.6s forwards;
  -moz-animation: scale 0.2s ease 1.6s forwards;
  -ms-animation: scale 0.2s ease 1.6s forwards;
  animation: scale 0.2s ease 1.6s forwards;
  -webkit-transform-origin: 78px 143px;
  -moz-transform-origin: 78px 143px;
  -ms-transform-origin: 78px 143px;
  transform-origin: 78px 143px; }

.red_bulb {
  -webkit-animation: red-to-green 0.5s ease 4s infinite alternate;
  -moz-animation: red-to-green 0.5s ease 4s infinite alternate;
  -ms-animation: red-to-green 0.5s ease 4s infinite alternate;
  animation: red-to-green 0.5s ease 4s infinite alternate; }

.red_1 {
  opacity: 0;
  -webkit-animation: scale 0.3s ease 0.75s forwards;
  -moz-animation: scale 0.3s ease 0.75s forwards;
  -ms-animation: scale 0.3s ease 0.75s forwards;
  animation: scale 0.3s ease 0.75s forwards;
  -webkit-transform-origin: 130px 255px;
  -moz-transform-origin: 130px 255px;
  -ms-transform-origin: 130px 255px;
  transform-origin: 130px 255px; }

.red_2 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 1.2s forwards;
  -moz-animation: scale 0.2s ease 1.2s forwards;
  -ms-animation: scale 0.2s ease 1.2s forwards;
  animation: scale 0.2s ease 1.2s forwards;
  -webkit-transform-origin: 143px 186px;
  -moz-transform-origin: 143px 186px;
  -ms-transform-origin: 143px 186px;
  transform-origin: 143px 186px; }

.red_3 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 2s forwards;
  -moz-animation: scale 0.2s ease 2s forwards;
  -ms-animation: scale 0.2s ease 2s forwards;
  animation: scale 0.2s ease 2s forwards;
  -webkit-transform-origin: 52px 188px;
  -moz-transform-origin: 52px 188px;
  -ms-transform-origin: 52px 188px;
  transform-origin: 52px 188px; }

.red_4 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 2.3s forwards;
  -moz-animation: scale 0.2s ease 2.3s forwards;
  -ms-animation: scale 0.2s ease 2.3s forwards;
  animation: scale 0.2s ease 2.3s forwards;
  -webkit-transform-origin: 105px 190px;
  -moz-transform-origin: 105px 190px;
  -ms-transform-origin: 105px 190px;
  transform-origin: 105px 190px; }

.red_5 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 2.9s forwards;
  -moz-animation: scale 0.2s ease 2.9s forwards;
  -ms-animation: scale 0.2s ease 2.9s forwards;
  animation: scale 0.2s ease 2.9s forwards;
  -webkit-transform-origin: 148px 106px;
  -moz-transform-origin: 148px 106px;
  -ms-transform-origin: 148px 106px;
  transform-origin: 148px 106px; }

.blue_bulb {
  -webkit-animation: blue-to-red 0.5s ease 4s infinite alternate;
  -moz-animation: blue-to-red 0.5s ease 4s infinite alternate;
  -ms-animation: blue-to-red 0.5s ease 4s infinite alternate;
  animation: blue-to-red 0.5s ease 4s infinite alternate; }

.blue_1 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 1.1s forwards;
  -moz-animation: scale 0.2s ease 1.1s forwards;
  -ms-animation: scale 0.2s ease 1.1s forwards;
  animation: scale 0.2s ease 1.1s forwards;
  -webkit-transform-origin: 151px 215px;
  -moz-transform-origin: 151px 215px;
  -ms-transform-origin: 151px 215px;
  transform-origin: 151px 215px; }

.blue_2 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 1.9s forwards;
  -moz-animation: scale 0.2s ease 1.9s forwards;
  -ms-animation: scale 0.2s ease 1.9s forwards;
  animation: scale 0.2s ease 1.9s forwards;
  -webkit-transform-origin: 52px 158px;
  -moz-transform-origin: 52px 158px;
  -ms-transform-origin: 52px 158px;
  transform-origin: 52px 158px; }

.blue_3 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 2.2s forwards;
  -moz-animation: scale 0.2s ease 2.2s forwards;
  -ms-animation: scale 0.2s ease 2.2s forwards;
  animation: scale 0.2s ease 2.2s forwards;
  -webkit-transform-origin: 78px 202px;
  -moz-transform-origin: 78px 202px;
  -ms-transform-origin: 78px 202px;
  transform-origin: 78px 202px; }

.blue_4 {
  opacity: 0;
  -webkit-animation: scale 0.2s ease 2.7s forwards;
  -moz-animation: scale 0.2s ease 2.7s forwards;
  -ms-animation: scale 0.2s ease 2.7s forwards;
  animation: scale 0.2s ease 2.7s forwards;
  -webkit-transform-origin: 138px 136px;
  -moz-transform-origin: 138px 136px;
  -ms-transform-origin: 138px 136px;
  transform-origin: 138px 136px; }

.wire {
  fill: none;
  stroke: #7D694E;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 0, 0, 555, 555;
  stroke-dashoffset: 0;
  -webkit-animation: reveal 3s linear;
  -moz-animation: reveal 3s linear;
  -ms-animation: reveal 3s linear;
  animation: reveal 3s linear;
  -webkit-transform-origin: 171px 291px;
  -moz-transform-origin: 171px 291px;
  -ms-transform-origin: 171px 291px;
  transform-origin: 171px 291px; }

@-webkit-keyframes reveal {
  from {
    stroke-dashoffset: -555; } }

@-moz-keyframes reveal {
  from {
    stroke-dashoffset: -555; } }

@keyframes reveal {
  from {
    stroke-dashoffset: -555; } }

@-webkit-keyframes red-to-green {
  0%, 100% {
    fill: #EF3C3C; }

  50% {
    fill: #B3BD44; } }

@-moz-keyframes red-to-green {
  0%, 100% {
    fill: #EF3C3C; }

  50% {
    fill: #B3BD44; } }

@keyframes red-to-green {
  0%, 100% {
    fill: #EF3C3C; }

  50% {
    fill: #B3BD44; } }

@-webkit-keyframes blue-to-red {
  0%, 100% {
    fill: #09B0A6; }

  50% {
    fill: #EF3C3C; } }

@-moz-keyframes blue-to-red {
  0%, 100% {
    fill: #09B0A6; }

  50% {
    fill: #EF3C3C; } }

@keyframes blue-to-red {
  0%, 100% {
    fill: #09B0A6; }

  50% {
    fill: #EF3C3C; } }

@-webkit-keyframes green-to-blue {
  0%, 100% {
    fill: #B3BD44; }

  50% {
    fill: #09B0A6; } }

@-moz-keyframes green-to-blue {
  0%, 100% {
    fill: #B3BD44; }

  50% {
    fill: #09B0A6; } }

@keyframes green-to-blue {
  0%, 100% {
    fill: #B3BD44; }

  50% {
    fill: #09B0A6; } }

.robin {
  -webkit-animation: jump 3s ease 3s infinite;
  -moz-animation: jump 3s ease 3s infinite;
  -ms-animation: jump 3s ease 3s infinite;
  animation: jump 3s ease 3s infinite; }

.tail {
  -webkit-animation: wag 10s ease forwards infinite;
  -moz-animation: wag 10s ease forwards infinite;
  -ms-animation: wag 10s ease forwards infinite;
  animation: wag 10s ease forwards infinite;
  -webkit-transform-origin: 189px 233px;
  -moz-transform-origin: 189px 233px;
  -ms-transform-origin: 189px 233px;
  transform-origin: 189px 233px; }

.eye {
  -webkit-animation: blink 10s ease forwards infinite;
  -moz-animation: blink 10s ease forwards infinite;
  -ms-animation: blink 10s ease forwards infinite;
  animation: blink 10s ease forwards infinite;
  -webkit-transform-origin: 64px 136px;
  -moz-transform-origin: 64px 136px;
  -ms-transform-origin: 64px 136px;
  transform-origin: 64px 136px; }

.wing {
  -webkit-animation: wing 3s ease forwards infinite;
  -moz-animation: wing 3s ease forwards infinite;
  -ms-animation: wing 3s ease forwards infinite;
  animation: wing 3s ease forwards infinite;
  -webkit-transform-origin: 80px 162px;
  -moz-transform-origin: 80px 162px;
  -ms-transform-origin: 80px 162px;
  transform-origin: 80px 162px; }

.cream {
  -webkit-animation: ruffle 3s ease forwards infinite;
  -moz-animation: ruffle 3s ease forwards infinite;
  -ms-animation: ruffle 3s ease forwards infinite;
  animation: ruffle 3s ease forwards infinite;
  -webkit-transform-origin: 90px 200px;
  -moz-transform-origin: 90px 200px;
  -ms-transform-origin: 90px 200px;
  transform-origin: 90px 200px; }

.robin_head {
  -webkit-animation: tilt 15s ease forwards infinite;
  -moz-animation: tilt 15s ease forwards infinite;
  -ms-animation: tilt 15s ease forwards infinite;
  animation: tilt 15s ease forwards infinite;
  -webkit-transform-origin: 100px 150px;
  -moz-transform-origin: 100px 150px;
  -ms-transform-origin: 100px 150px;
  transform-origin: 100px 150px; }

@-webkit-keyframes tilt {
  0%, 40%, 60%, 100% {
    -webkit-transform: rotate(0deg); }

  55% {
    -webkit-transform: rotate(25deg) translateX(18px); } }

@-moz-keyframes tilt {
  0%, 40%, 60%, 100% {
    -moz-transform: rotate(0deg); }

  55% {
    -moz-transform: rotate(25deg) translateX(18px); } }

@keyframes tilt {
  0%, 40%, 60%, 100% {
    transform: rotate(0deg); }

  55% {
    transform: rotate(25deg) translateX(18px); } }

@-webkit-keyframes ruffle {
  0%, 100% {
    -webkit-transform: rotate(0deg); }

  50% {
    -webkit-transform: rotate(-2deg); } }

@-moz-keyframes ruffle {
  0%, 100% {
    -moz-transform: rotate(0deg); }

  50% {
    -moz-transform: rotate(-2deg); } }

@keyframes ruffle {
  0%, 100% {
    transform: rotate(0deg); }

  50% {
    transform: rotate(-2deg); } }

@-webkit-keyframes wing {
  0%, 100% {
    -webkit-transform: rotate(0deg); }

  50% {
    -webkit-transform: rotate(10deg); } }

@-moz-keyframes wing {
  0%, 100% {
    -moz-transform: rotate(0deg); }

  50% {
    -moz-transform: rotate(10deg); } }

@keyframes wing {
  0%, 100% {
    transform: rotate(0deg); }

  50% {
    transform: rotate(10deg); } }

@-webkit-keyframes blink {
  0%, 10%, 40%, 50%, 80%, 90%, 100% {
    -webkit-transform: scale(1, 1); }

  5%, 45%, 85% {
    -webkit-transform: scale(0, 0); } }

@-moz-keyframes blink {
  0%, 10%, 40%, 50%, 80%, 90%, 100% {
    -moz-transform: scale(1, 1); }

  5%, 45%, 85% {
    -moz-transform: scale(0, 0); } }

@keyframes blink {
  0%, 10%, 40%, 50%, 80%, 90%, 100% {
    transform: scale(1, 1); }

  5%, 45%, 85% {
    transform: scale(0, 0); } }

@-webkit-keyframes wag {
  0%, 45%, 65%, 100% {
    -webkit-transform: rotate(0deg); }

  25%, 75% {
    -webkit-transform: rotate(5deg); }

  50% {
    -webkit-transform: rotate(-10deg); } }

@-moz-keyframes wag {
  0%, 45%, 65%, 100% {
    -moz-transform: rotate(0deg); }

  25%, 75% {
    -moz-transform: rotate(5deg); }

  50% {
    -moz-transform: rotate(-10deg); } }

@keyframes wag {
  0%, 45%, 65%, 100% {
    transform: rotate(0deg); }

  25%, 75% {
    transform: rotate(5deg); }

  50% {
    transform: rotate(-10deg); } }

.brown {
  -webkit-transform: translateY(-291px);
  -moz-transform: translateY(-291px);
  -ms-transform: translateY(-291px);
  transform: translateY(-291px);
  -webkit-animation: drop 0.7s ease forwards, brown 5s ease 0.4s infinite;
  -moz-animation: drop 0.7s ease forwards, brown 5s ease 0.4s infinite;
  -ms-animation: drop 0.7s ease forwards, brown 5s ease 0.4s infinite;
  animation: drop 0.7s ease forwards, brown 5s ease 0.4s infinite;
  -webkit-transform-origin: 62px 0px;
  -moz-transform-origin: 62px 0px;
  -ms-transform-origin: 62px 0px;
  transform-origin: 62px 0px; }

.red {
  -webkit-transform: translateY(-291px);
  -moz-transform: translateY(-291px);
  -ms-transform: translateY(-291px);
  transform: translateY(-291px);
  -webkit-animation: drop 1s ease forwards, red 3s ease 0.4s infinite;
  -moz-animation: drop 1s ease forwards, red 3s ease 0.4s infinite;
  -ms-animation: drop 1s ease forwards, red 3s ease 0.4s infinite;
  animation: drop 1s ease forwards, red 3s ease 0.4s infinite;
  -webkit-transform-origin: 111px 0px;
  -moz-transform-origin: 111px 0px;
  -ms-transform-origin: 111px 0px;
  transform-origin: 111px 0px; }

.green {
  -webkit-transform: translateY(-271px);
  -moz-transform: translateY(-271px);
  -ms-transform: translateY(-271px);
  transform: translateY(-271px);
  -webkit-animation: drop 2s ease forwards, green 4s ease 0.4s infinite;
  -moz-animation: drop 2s ease forwards, green 4s ease 0.4s infinite;
  -ms-animation: drop 2s ease forwards, green 4s ease 0.4s infinite;
  animation: drop 2s ease forwards, green 4s ease 0.4s infinite;
  -webkit-transform-origin: 133px 0px;
  -moz-transform-origin: 133px 0px;
  -ms-transform-origin: 133px 0px;
  transform-origin: 133px 0px; }

@-webkit-keyframes drop {
  0% {
    -webkit-transform: translateY(-291px) rotate(0deg); }

  50% {
    -webkit-transform: rotate(2deg); }

  75% {
    -webkit-transform: rotate(-2deg); }

  100% {
    -webkit-transform: translateY(0px) rotate(0deg); } }

@-moz-keyframes drop {
  0% {
    -moz-transform: translateY(-291px) rotate(0deg); }

  50% {
    -moz-transform: rotate(2deg); }

  75% {
    -moz-transform: rotate(-2deg); }

  100% {
    -moz-transform: translateY(0px) rotate(0deg); } }

@keyframes drop {
  0% {
    transform: translateY(-291px) rotate(0deg); }

  50% {
    transform: rotate(2deg); }

  75% {
    transform: rotate(-2deg); }

  100% {
    transform: translateY(0px) rotate(0deg); } }

@-webkit-keyframes brown {
  0%, 100% {
    -webkit-transform: rotate(2deg); }

  50% {
    -webkit-transform: rotate(-2deg); } }

@-moz-keyframes brown {
  0%, 100% {
    -moz-transform: rotate(2deg); }

  50% {
    -moz-transform: rotate(-2deg); } }

@keyframes brown {
  0%, 100% {
    transform: rotate(2deg); }

  50% {
    transform: rotate(-2deg); } }

@-webkit-keyframes red {
  0%, 100% {
    -webkit-transform: rotate(5deg); }

  50% {
    -webkit-transform: rotate(-5deg); } }

@-moz-keyframes red {
  0%, 100% {
    -moz-transform: rotate(5deg); }

  50% {
    -moz-transform: rotate(-5deg); } }

@keyframes red {
  0%, 100% {
    transform: rotate(5deg); }

  50% {
    transform: rotate(-5deg); } }

@-webkit-keyframes green {
  0%, 100% {
    -webkit-transform: rotate(3deg); }

  50% {
    -webkit-transform: rotate(-3deg); } }

@-moz-keyframes green {
  0%, 100% {
    -moz-transform: rotate(3deg); }

  50% {
    -moz-transform: rotate(-3deg); } }

@keyframes green {
  0%, 100% {
    transform: rotate(3deg); }

  50% {
    transform: rotate(-3deg); } }

.gift {
  -webkit-animation: jump 3s ease 5s infinite, jiggle 1s ease 5s infinite;
  -moz-animation: jump 3s ease 5s infinite, jiggle 1s ease 5s infinite;
  -ms-animation: jump 3s ease 5s infinite, jiggle 1s ease 5s infinite;
  animation: jump 3s ease 5s infinite, jiggle 1s ease 5s infinite;
  -webkit-transform-origin: 104px 289px;
  -moz-transform-origin: 104px 289px;
  -ms-transform-origin: 104px 289px;
  transform-origin: 104px 289px; }
  .gift .box_bottom {
    -webkit-animation: fall 1s ease-in forwards;
    -moz-animation: fall 1s ease-in forwards;
    -ms-animation: fall 1s ease-in forwards;
    animation: fall 1s ease-in forwards; }
  .gift .box_lid {
    -webkit-transform: translateY(-303px);
    -moz-transform: translateY(-303px);
    -ms-transform: translateY(-303px);
    transform: translateY(-303px);
    -webkit-animation: fall 1s ease-in 1s forwards;
    -moz-animation: fall 1s ease-in 1s forwards;
    -ms-animation: fall 1s ease-in 1s forwards;
    animation: fall 1s ease-in 1s forwards; }
  .gift .wrap_across {
    opacity: 0;
    -webkit-animation: scale 0.5s ease 2s forwards;
    -moz-animation: scale 0.5s ease 2s forwards;
    -ms-animation: scale 0.5s ease 2s forwards;
    animation: scale 0.5s ease 2s forwards;
    -webkit-transform-origin: 25px 215px;
    -moz-transform-origin: 25px 215px;
    -ms-transform-origin: 25px 215px;
    transform-origin: 25px 215px; }
  .gift .wrap_up {
    opacity: 0;
    -webkit-animation: scale 0.5s ease 2.5s forwards;
    -moz-animation: scale 0.5s ease 2.5s forwards;
    -ms-animation: scale 0.5s ease 2.5s forwards;
    animation: scale 0.5s ease 2.5s forwards;
    -webkit-transform-origin: 60px 120px;
    -moz-transform-origin: 60px 120px;
    -ms-transform-origin: 60px 120px;
    transform-origin: 60px 120px; }
  .gift .bow {
    opacity: 0;
    -webkit-animation: scale 1s ease 3s forwards;
    -moz-animation: scale 1s ease 3s forwards;
    -ms-animation: scale 1s ease 3s forwards;
    animation: scale 1s ease 3s forwards;
    -webkit-transform-origin: 75px 122px;
    -moz-transform-origin: 75px 122px;
    -ms-transform-origin: 75px 122px;
    transform-origin: 75px 122px; }

@-webkit-keyframes fall {
  0% {
    -webkit-transform: translateY(-303px); }

  60% {
    -webkit-transform: translateY(0px); }

  65% {
    -webkit-transform: translateY(-20px) rotate(-2deg); }

  80% {
    -webkit-transform: translateY(0px) rotate(0deg); }

  85% {
    -webkit-transform: translateY(-10px) rotate(2deg); }

  100% {
    -webkit-transform: translateY(0px) rotate(0deg); } }

@-moz-keyframes fall {
  0% {
    -moz-transform: translateY(-303px); }

  60% {
    -moz-transform: translateY(0px); }

  65% {
    -moz-transform: translateY(-20px) rotate(-2deg); }

  80% {
    -moz-transform: translateY(0px) rotate(0deg); }

  85% {
    -moz-transform: translateY(-10px) rotate(2deg); }

  100% {
    -moz-transform: translateY(0px) rotate(0deg); } }

@keyframes fall {
  0% {
    transform: translateY(-303px); }

  60% {
    transform: translateY(0px); }

  65% {
    transform: translateY(-20px) rotate(-2deg); }

  80% {
    transform: translateY(0px) rotate(0deg); }

  85% {
    transform: translateY(-10px) rotate(2deg); }

  100% {
    transform: translateY(0px) rotate(0deg); } }

@-webkit-keyframes jiggle {
  0%, 50%, 100% {
    -webkit-transform: rotate(0deg); }

  25% {
    -webkit-transform: translateY(-5px) rotate(1deg); }

  70% {
    -webkit-transform: rotate(-1deg); } }

@-moz-keyframes jiggle {
  0%, 50%, 100% {
    -moz-transform: rotate(0deg); }

  25% {
    -moz-transform: translateY(-5px) rotate(1deg); }

  70% {
    -moz-transform: rotate(-1deg); } }

@keyframes jiggle {
  0%, 50%, 100% {
    transform: rotate(0deg); }

  25% {
    transform: translateY(-5px) rotate(1deg); }

  70% {
    transform: rotate(-1deg); } }

.mitten_right {
  -webkit-animation: right-swing 3s ease-in-out infinite;
  -moz-animation: right-swing 3s ease-in-out infinite;
  -ms-animation: right-swing 3s ease-in-out infinite;
  animation: right-swing 3s ease-in-out infinite;
  -webkit-transform-origin: 89px 58px;
  -moz-transform-origin: 89px 58px;
  -ms-transform-origin: 89px 58px;
  transform-origin: 89px 58px; }

.mitten_left {
  -webkit-animation: left-swing 3s ease-in-out infinite;
  -moz-animation: left-swing 3s ease-in-out infinite;
  -ms-animation: left-swing 3s ease-in-out infinite;
  animation: left-swing 3s ease-in-out infinite;
  -webkit-transform-origin: 65px 60px;
  -moz-transform-origin: 65px 60px;
  -ms-transform-origin: 65px 60px;
  transform-origin: 65px 60px; }

@-webkit-keyframes right-swing {
  0%, 100% {
    -webkit-transform: rotate(0); }

  50% {
    -webkit-transform: rotate(25deg); } }

@-moz-keyframes right-swing {
  0%, 100% {
    -moz-transform: rotate(0); }

  50% {
    -moz-transform: rotate(25deg); } }

@keyframes right-swing {
  0%, 100% {
    transform: rotate(0); }

  50% {
    transform: rotate(25deg); } }

@-webkit-keyframes left-swing {
  0%, 100% {
    -webkit-transform: rotate(0); }

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

@-moz-keyframes left-swing {
  0%, 100% {
    -moz-transform: rotate(0); }

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

@keyframes left-swing {
  0%, 100% {
    transform: rotate(0); }

  50% {
    transform: rotate(-15deg); } }

.snowman {
  -webkit-animation: sway 3s ease 5s infinite;
  -moz-animation: sway 3s ease 5s infinite;
  -ms-animation: sway 3s ease 5s infinite;
  animation: sway 3s ease 5s infinite;
  -webkit-transform-origin: 101px 303px;
  -moz-transform-origin: 101px 303px;
  -ms-transform-origin: 101px 303px;
  transform-origin: 101px 303px; }
  .snowman .snowman_body {
    -webkit-animation: body-drop 0.5s ease-in forwards;
    -moz-animation: body-drop 0.5s ease-in forwards;
    -ms-animation: body-drop 0.5s ease-in forwards;
    animation: body-drop 0.5s ease-in forwards; }
  .snowman .scarf {
    opacity: 0;
    -webkit-animation: scale 0.5s ease 1s forwards;
    -moz-animation: scale 0.5s ease 1s forwards;
    -ms-animation: scale 0.5s ease 1s forwards;
    animation: scale 0.5s ease 1s forwards;
    -webkit-transform-origin: 55px 165px;
    -moz-transform-origin: 55px 165px;
    -ms-transform-origin: 55px 165px;
    transform-origin: 55px 165px; }
  .snowman .scarf_knot {
    opacity: 0;
    -webkit-animation: scale 0.3s ease 1.5s forwards;
    -moz-animation: scale 0.3s ease 1.5s forwards;
    -ms-animation: scale 0.3s ease 1.5s forwards;
    animation: scale 0.3s ease 1.5s forwards;
    -webkit-transform-origin: 92px 190px;
    -moz-transform-origin: 92px 190px;
    -ms-transform-origin: 92px 190px;
    transform-origin: 92px 190px; }
  .snowman .snowman_head {
    -webkit-transform: translateY(-303px);
    -moz-transform: translateY(-303px);
    -ms-transform: translateY(-303px);
    transform: translateY(-303px);
    -webkit-animation: body-drop 0.5s ease-in 0.2s forwards;
    -moz-animation: body-drop 0.5s ease-in 0.2s forwards;
    -ms-animation: body-drop 0.5s ease-in 0.2s forwards;
    animation: body-drop 0.5s ease-in 0.2s forwards; }
  .snowman .hat {
    -webkit-transform: translateY(-303px);
    -moz-transform: translateY(-303px);
    -ms-transform: translateY(-303px);
    transform: translateY(-303px);
    -webkit-animation: body-drop 0.5s ease-in 0.3s forwards;
    -moz-animation: body-drop 0.5s ease-in 0.3s forwards;
    -ms-animation: body-drop 0.5s ease-in 0.3s forwards;
    animation: body-drop 0.5s ease-in 0.3s forwards; }
  .snowman .nose {
    opacity: 0;
    -webkit-animation: scale 0.3s ease 2.5s forwards;
    -moz-animation: scale 0.3s ease 2.5s forwards;
    -ms-animation: scale 0.3s ease 2.5s forwards;
    animation: scale 0.3s ease 2.5s forwards;
    -webkit-transform-origin: 104px 142px;
    -moz-transform-origin: 104px 142px;
    -ms-transform-origin: 104px 142px;
    transform-origin: 104px 142px; }
  .snowman .mouth .m1 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.1s forwards;
    -moz-animation: scale 0.1s ease 3.1s forwards;
    -ms-animation: scale 0.1s ease 3.1s forwards;
    animation: scale 0.1s ease 3.1s forwards;
    -webkit-transform-origin: 82px 156px;
    -moz-transform-origin: 82px 156px;
    -ms-transform-origin: 82px 156px;
    transform-origin: 82px 156px; }
  .snowman .mouth .m2 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.2s forwards;
    -moz-animation: scale 0.1s ease 3.2s forwards;
    -ms-animation: scale 0.1s ease 3.2s forwards;
    animation: scale 0.1s ease 3.2s forwards;
    -webkit-transform-origin: 86px 162px;
    -moz-transform-origin: 86px 162px;
    -ms-transform-origin: 86px 162px;
    transform-origin: 86px 162px; }
  .snowman .mouth .m3 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.3s forwards;
    -moz-animation: scale 0.1s ease 3.3s forwards;
    -ms-animation: scale 0.1s ease 3.3s forwards;
    animation: scale 0.1s ease 3.3s forwards;
    -webkit-transform-origin: 92px 167px;
    -moz-transform-origin: 92px 167px;
    -ms-transform-origin: 92px 167px;
    transform-origin: 92px 167px; }
  .snowman .mouth .m4 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.4s forwards;
    -moz-animation: scale 0.1s ease 3.4s forwards;
    -ms-animation: scale 0.1s ease 3.4s forwards;
    animation: scale 0.1s ease 3.4s forwards;
    -webkit-transform-origin: 98px 169px;
    -moz-transform-origin: 98px 169px;
    -ms-transform-origin: 98px 169px;
    transform-origin: 98px 169px; }
  .snowman .mouth .m5 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.5s forwards;
    -moz-animation: scale 0.1s ease 3.5s forwards;
    -ms-animation: scale 0.1s ease 3.5s forwards;
    animation: scale 0.1s ease 3.5s forwards;
    -webkit-transform-origin: 106px 171px;
    -moz-transform-origin: 106px 171px;
    -ms-transform-origin: 106px 171px;
    transform-origin: 106px 171px; }
  .snowman .mouth .m6 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.6s forwards;
    -moz-animation: scale 0.1s ease 3.6s forwards;
    -ms-animation: scale 0.1s ease 3.6s forwards;
    animation: scale 0.1s ease 3.6s forwards;
    -webkit-transform-origin: 113px 171px;
    -moz-transform-origin: 113px 171px;
    -ms-transform-origin: 113px 171px;
    transform-origin: 113px 171px; }
  .snowman .mouth .m7 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.7s forwards;
    -moz-animation: scale 0.1s ease 3.7s forwards;
    -ms-animation: scale 0.1s ease 3.7s forwards;
    animation: scale 0.1s ease 3.7s forwards;
    -webkit-transform-origin: 120px 171px;
    -moz-transform-origin: 120px 171px;
    -ms-transform-origin: 120px 171px;
    transform-origin: 120px 171px; }
  .snowman .mouth .m8 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.8s forwards;
    -moz-animation: scale 0.1s ease 3.8s forwards;
    -ms-animation: scale 0.1s ease 3.8s forwards;
    animation: scale 0.1s ease 3.8s forwards;
    -webkit-transform-origin: 127px 169px;
    -moz-transform-origin: 127px 169px;
    -ms-transform-origin: 127px 169px;
    transform-origin: 127px 169px; }
  .snowman .mouth .m9 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 3.9s forwards;
    -moz-animation: scale 0.1s ease 3.9s forwards;
    -ms-animation: scale 0.1s ease 3.9s forwards;
    animation: scale 0.1s ease 3.9s forwards;
    -webkit-transform-origin: 132px 165px;
    -moz-transform-origin: 132px 165px;
    -ms-transform-origin: 132px 165px;
    transform-origin: 132px 165px; }
  .snowman .mouth .m10 {
    opacity: 0;
    -webkit-animation: scale 0.1s ease 4s forwards;
    -moz-animation: scale 0.1s ease 4s forwards;
    -ms-animation: scale 0.1s ease 4s forwards;
    animation: scale 0.1s ease 4s forwards;
    -webkit-transform-origin: 137px 160px;
    -moz-transform-origin: 137px 160px;
    -ms-transform-origin: 137px 160px;
    transform-origin: 137px 160px; }
  .snowman .eye_left {
    opacity: 0;
    -webkit-animation: scale 0.2s ease 2.7s forwards;
    -moz-animation: scale 0.2s ease 2.7s forwards;
    -ms-animation: scale 0.2s ease 2.7s forwards;
    animation: scale 0.2s ease 2.7s forwards;
    -webkit-transform-origin: 92px 122px;
    -moz-transform-origin: 92px 122px;
    -ms-transform-origin: 92px 122px;
    transform-origin: 92px 122px; }
  .snowman .eye_right {
    opacity: 0;
    -webkit-animation: scale 0.2s ease 2.9s forwards;
    -moz-animation: scale 0.2s ease 2.9s forwards;
    -ms-animation: scale 0.2s ease 2.9s forwards;
    animation: scale 0.2s ease 2.9s forwards;
    -webkit-transform-origin: 125px 120px;
    -moz-transform-origin: 125px 120px;
    -ms-transform-origin: 125px 120px;
    transform-origin: 125px 120px; }
  .snowman .button_top {
    opacity: 0;
    -webkit-animation: scale 0.3s ease 2.2s forwards;
    -moz-animation: scale 0.3s ease 2.2s forwards;
    -ms-animation: scale 0.3s ease 2.2s forwards;
    animation: scale 0.3s ease 2.2s forwards;
    -webkit-transform-origin: 132px 217px;
    -moz-transform-origin: 132px 217px;
    -ms-transform-origin: 132px 217px;
    transform-origin: 132px 217px; }
  .snowman .button_bottom {
    opacity: 0;
    -webkit-animation: scale 0.3s ease 2s forwards;
    -moz-animation: scale 0.3s ease 2s forwards;
    -ms-animation: scale 0.3s ease 2s forwards;
    animation: scale 0.3s ease 2s forwards;
    -webkit-transform-origin: 132px 252px;
    -moz-transform-origin: 132px 252px;
    -ms-transform-origin: 132px 252px;
    transform-origin: 132px 252px; }

@-webkit-keyframes body-drop {
  0% {
    -webkit-transform: translateY(-303px); }

  100% {
    -webkit-transform: translateY(0px); } }

@-moz-keyframes body-drop {
  0% {
    -moz-transform: translateY(-303px); }

  100% {
    -moz-transform: translateY(0px); } }

@keyframes body-drop {
  0% {
    transform: translateY(-303px); }

  100% {
    transform: translateY(0px); } }

@-webkit-keyframes scale {
  0% {
    opacity: 1;
    -webkit-transform: scale(0, 0); }

  100% {
    opacity: 1;
    -webkit-transform: scale(1, 1); } }

@-moz-keyframes scale {
  0% {
    opacity: 1;
    -moz-transform: scale(0, 0); }

  100% {
    opacity: 1;
    -moz-transform: scale(1, 1); } }

@keyframes scale {
  0% {
    opacity: 1;
    transform: scale(0, 0); }

  100% {
    opacity: 1;
    transform: scale(1, 1); } }

@-webkit-keyframes sway {
  0%, 50%, 100% {
    -webkit-transform: rotate(0deg); }

  25% {
    -webkit-transform: rotate(1deg); }

  75% {
    -webkit-transform: rotate(-1deg); } }

@-moz-keyframes sway {
  0%, 50%, 100% {
    -moz-transform: rotate(0deg); }

  25% {
    -moz-transform: rotate(1deg); }

  75% {
    -moz-transform: rotate(-1deg); } }

@keyframes sway {
  0%, 50%, 100% {
    transform: rotate(0deg); }

  25% {
    transform: rotate(1deg); }

  75% {
    transform: rotate(-1deg); } }

#advent_calendar {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1500;
  width: 100%;
  height: 100%;
  background: url("/assets/giraffe/promotions/2013/advent/img/black.png");
  background: rgba(0, 0, 0, 0.7); }
  #advent_calendar .advent_treat_wrapper,
  #advent_calendar .advent_decorations {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -263px 0 0 -465px; }
  #advent_calendar .advent_treat_wrapper {
    z-index: 3;
    width: 900px;
    height: 496px;
    border: solid 15px transparent;
    background: url("/assets/giraffe/promotions/2013/advent/img/door-silhouette.png") 290px 33px no-repeat; }
  #advent_calendar .advent_door,
  #advent_calendar .advent_door_shadow,
  #advent_calendar .advent_door_inside {
    position: absolute;
    width: 330px;
    height: 432px; }
  #advent_calendar .advent_door {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    top: 33px;
    left: 290px;
    z-index: 30; }
    #advent_calendar .advent_door svg {
      display: none; }
    #advent_calendar .advent_door.svg svg {
      display: block; }
    #advent_calendar .advent_door.svg img {
      display: none; }
  #advent_calendar .advent_door_illustration {
    top: 26px;
    left: 18px; }
  #advent_calendar .advent_door_shadow {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    top: 36px;
    left: 293px;
    z-index: 0;
    opacity: .8;
    background: url("/assets/giraffe/promotions/2013/advent/img/door-silhouette.png"); }
  #advent_calendar .advent_treat {
    position: absolute;
    top: 49px;
    left: 300px;
    z-index: 20;
    width: 304px;
    height: 400px;
    background: black url("/assets/giraffe/promotions/2013/advent/img/treat-background.jpg") 50% 50%; }
    #advent_calendar .advent_treat img {
      -webkit-transform-origin: 0 50%;
      -moz-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
      transform-origin: 0 50%;
      position: absolute;
      top: 50%;
      left: -10px;
      z-index: 0;
      width: 370px;
      height: 530px;
      margin-top: -265px;
      opacity: 0; }
  #advent_calendar .advent_decorations {
    z-index: 1;
    width: 900px;
    height: 496px;
    border: solid 15px #391f52;
    box-shadow: inset 0 0 0 1px rgba(115, 63, 180, 0.5);
    background: #5b328e url("/assets/giraffe/promotions/2013/advent/img/background.jpg") 50% 50% no-repeat; }
    #advent_calendar .advent_decorations .left {
      float: left;
      position: relative;
      z-index: 0;
      width: 290px;
      height: 496px;
      text-align: center; }
      #advent_calendar .advent_decorations .left img {
        position: absolute; }
    #advent_calendar .advent_decorations .advent_logo {
      top: -40px;
      left: -42px; }
    #advent_calendar .advent_decorations .advent_title {
      top: 201px;
      left: 14px; }
    #advent_calendar .advent_decorations .advent_explanation {
      top: 341px;
      left: 9px; }
    #advent_calendar .advent_decorations .advent_arrow {
      -webkit-transform-origin: 50% -100%;
      -moz-transform-origin: 50% -100%;
      -ms-transform-origin: 50% -100%;
      transform-origin: 50% -100%;
      top: 407px;
      left: 164px; }
      #advent_calendar .advent_decorations .advent_arrow.swing {
        -webkit-animation: swing 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
        -moz-animation: swing 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
        -ms-animation: swing 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
        animation: swing 1s infinite cubic-bezier(0.645, 0.045, 0.355, 1); }
    #advent_calendar .advent_decorations .right {
      float: right;
      width: 250px;
      height: 496px;
      background: url("/assets/giraffe/promotions/2013/advent/img/other-doors.jpg"); }
  #advent_calendar .advent_close {
    position: absolute;
    top: -24px;
    right: -24px;
    z-index: 20;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    box-shadow: 0 3px #e3700d;
    background: #f38a30 url("/assets/giraffe/promotions/2013/advent/img/close-icon.png") 50% 50% no-repeat;
    cursor: pointer; }
  #advent_calendar .no_thanks {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 30;
    width: 380px;
    padding: 10px 15px;
    margin: 283px 0 0 -206px;
    border: solid 1px white;
    border-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    background: black;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 12px;
    text-align: center;
    cursor: pointer; }
  #advent_calendar .advent_darken {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: black; }

.advent_door_illustration {
  position: relative;
  z-index: 0;
  width: 286px;
  height: 380px;
  background-position: -26px -18px; }
  .advent_door_illustration.advent_beige {
    background-color: #d8cead; }
  .advent_door_illustration.advent_red {
    background-color: #eb3d41; }
  .advent_door_illustration.advent_green {
    background-color: #a6ad47; }
  .advent_door_illustration.advent_turquoise {
    background-color: #19a595; }

.advent_beige {
  background-image: url("/assets/giraffe/promotions/2013/advent/img/door-texture-beige.png"); }

.advent_red {
  background-image: url("/assets/giraffe/promotions/2013/advent/img/door-texture-red.png"); }

.advent_green {
  background-image: url("/assets/giraffe/promotions/2013/advent/img/door-texture-green.png"); }

.advent_turquoise {
  background-image: url("/assets/giraffe/promotions/2013/advent/img/door-texture-turquoise.png"); }

.illustration_gift .advent_star_a1 {
  top: 10px;
  left: 100px; }
.illustration_gift .advent_star_a2 {
  top: 190px;
  left: 190px; }
.illustration_gift .advent_star_a3 {
  top: 20px;
  left: 50px; }

.illustration_mittens .advent_star_a1 {
  top: 230px;
  left: 220px; }
.illustration_mittens .advent_star_a2 {
  top: 200px;
  left: 190px; }
.illustration_mittens .advent_star_a3 {
  top: 242px;
  left: 176px; }

.illustration_bird .advent_star_a1 {
  top: 10px;
  left: 30px; }
.illustration_bird .advent_star_a2 {
  top: 10px;
  left: 120px; }
.illustration_bird .advent_star_a3 {
  top: 42px;
  left: 84px; }

.illustration_baubles .advent_star_a1 {
  top: 12px;
  left: 126px; }
.illustration_baubles .advent_star_a2 {
  top: 200px;
  left: 165px; }
.illustration_baubles .advent_star_a3 {
  top: 230px;
  left: 205px; }

.illustration_snowman .advent_star_a1 {
  top: 12px;
  left: 126px; }
.illustration_snowman .advent_star_a2 {
  top: 200px;
  left: 185px; }
.illustration_snowman .advent_star_a3 {
  top: 250px;
  left: 215px; }

.illustration_lights .advent_star_a1 {
  top: 10px;
  left: 100px; }
.illustration_lights .advent_star_a2 {
  top: 190px;
  left: 190px; }
.illustration_lights .advent_star_a3 {
  top: 20px;
  left: 50px; }

.advent_door_number {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 130px;
  height: 200px;
  background-image: url("/assets/giraffe/promotions/2013/advent/img/door/numbers.png"); }

.advent_number_1 {
  background-position: 0px 0; }

.advent_number_2 {
  background-position: -130px 0; }

.advent_number_3 {
  background-position: -260px 0; }

.advent_number_4 {
  background-position: -390px 0; }

.advent_number_5 {
  background-position: -520px 0; }

.advent_number_6 {
  background-position: -650px 0; }

.advent_number_7 {
  background-position: -780px 0; }

.advent_number_8 {
  background-position: -910px 0; }

.advent_number_9 {
  background-position: -1040px 0; }

.advent_number_10 {
  background-position: -1170px 0; }

.advent_number_11 {
  background-position: -1300px 0; }

.advent_number_12 {
  background-position: -1430px 0; }

.advent_number_13 {
  background-position: -1560px 0; }

.advent_number_14 {
  background-position: -1690px 0; }

.advent_number_15 {
  background-position: -1820px 0; }

.advent_number_16 {
  background-position: -1950px 0; }

.advent_number_17 {
  background-position: -2080px 0; }

.advent_number_18 {
  background-position: -2210px 0; }

.advent_number_19 {
  background-position: -2340px 0; }

.advent_number_20 {
  background-position: -2470px 0; }

.advent_number_21 {
  background-position: -2600px 0; }

.advent_number_22 {
  background-position: -2730px 0; }

.advent_number_23 {
  background-position: -2860px 0; }

.advent_number_24 {
  background-position: -2990px 0; }

.advent_number_25 {
  background-position: -3120px 0; }

.advent_star_orange,
.advent_star_yellow {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 0;
  width: 60px;
  height: 60px; }
  .advent_star_orange:before,
  .advent_star_yellow:before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: url("/assets/giraffe/promotions/2013/advent/img/door/stars.png"); }

.advent_star_orange:before {
  background-position: 0 100%; }

.advent_star_large:before {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9); }

.advent_star_medium:before {
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7); }

.advent_star_small:before {
  -webkit-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -ms-transform: scale(0.5);
  transform: scale(0.5); }

.advent_star_a1 {
  -webkit-animation: star-blink 10s infinite 0.5s both;
  -moz-animation: star-blink 10s infinite 0.5s both;
  -ms-animation: star-blink 10s infinite 0.5s both;
  animation: star-blink 10s infinite 0.5s both; }

.advent_star_a2 {
  -webkit-animation: star-blink 6s infinite reverse 0.2s both;
  -moz-animation: star-blink 6s infinite reverse 0.2s both;
  -ms-animation: star-blink 6s infinite reverse 0.2s both;
  animation: star-blink 6s infinite reverse 0.2s both; }

.advent_star_a3 {
  -webkit-animation: star-blink 8s infinite alternate both;
  -moz-animation: star-blink 8s infinite alternate both;
  -ms-animation: star-blink 8s infinite alternate both;
  animation: star-blink 8s infinite alternate both; }

.advent_button {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding-bottom: 46px;
  text-align: center; }
  .advent_button span,
  .advent_button a {
    display: inline-block;
    position: relative;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 20px;
    color: white;
    cursor: pointer;
    text-decoration: none; }
    .advent_button span:active,
    .advent_button a:active {
      top: 2px; }
  .advent_button .button_red {
    background: #eb3d41;
    box-shadow: 0 3px #de171b;
    text-shadow: 0 1px 1px #c71519; }
    .advent_button .button_red:hover {
      background: #ed5458; }
    .advent_button .button_red:active {
      box-shadow: 0 1px #c71519; }
  .advent_button .button_green {
    background: #a6ad47;
    box-shadow: 0 3px #838938;
    text-shadow: 0 1px 1px #727731; }
    .advent_button .button_green:hover {
      background: #b2b954; }
    .advent_button .button_green:active {
      box-shadow: 0 1px #727731; }
  .advent_button .button_orange {
    background: #f38a30;
    box-shadow: 0 3px #e3700d;
    text-shadow: 0 1px 1px #cb640c; }
    .advent_button .button_orange:hover {
      background: #f49848; }
    .advent_button .button_orange:active {
      box-shadow: 0 1px #cb640c; }

.advent_mobile_body {
  padding: 5px;
  background: #2c183f; }

.advent_treat_mobile {
  position: relative;
  width: 100%;
  max-width: 370px;
  min-height: 440px;
  padding: 1px 0;
  margin: auto; }
  .advent_treat_mobile .advent_door {
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    transform-origin: 0 50%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-position: 50% 50%;
    background-size: 100% 100%; }
    .advent_treat_mobile .advent_door svg {
      display: none; }
    .advent_treat_mobile .advent_door.svg img {
      display: none; }
    .advent_treat_mobile .advent_door.svg svg {
      display: block; }
  .advent_treat_mobile .advent_door_content {
    position: relative;
    padding: 30px 0 20px; }
  .advent_treat_mobile .advent_door_illustration {
    margin: auto; }
  .advent_treat_mobile .advent_treat {
    position: relative;
    z-index: 0;
    min-height: 0;
    margin: 10px 20px;
    background: black url("/assets/giraffe/promotions/2013/advent/img/treat-background.jpg") 50% 50%;
    background-size: 100% 100%; }
    .advent_treat_mobile .advent_treat img {
      width: 100%; }
    .advent_treat_mobile .advent_treat .advent_button {
      padding-bottom: 0;
      bottom: 20.5%; }

.mobile_holding_image {
  width: 100%; }

              
            
!

JS

              
                
              
            
!
999px

Console