pEKqo

index.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>

pEKqo.markdown

pEKqo

A Pen by liujiyang on CodePen.

License.

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.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%; }