@keyframes santa__mov {
   0%, 100% {
     bottom: 20px;
     left: 0;
     transform: translateX(-130%) rotate(-10deg);
  }
   30% {
     bottom: 100%;
     left: 100%;
     transform: translateX(130%) rotate(-10deg);
  }
   40% {
     bottom: 20px;
     left: 100%;
     transform: translateX(130%) rotateY(180deg);
  }
   70% {
     bottom: 20px;
     left: 0;
     transform: translateX(-130%) rotateY(180deg);
  }
}
 @keyframes santa__hand-left {
   0% {
     transform: rotate(15deg);
  }
   100% {
     transform: rotate(-30deg);
  }
}
 @keyframes santa__hand-right {
   0% {
     transform: rotate(15deg);
  }
   100% {
     transform: rotate(-6deg);
  }
}
 @keyframes rope__left {
   0% {
     transform: rotate(2deg);
  }
   100% {
     transform: rotate(5deg);
  }
}
 @keyframes rope__right {
   0% {
     transform: rotate(0deg);
  }
   100% {
     transform: rotate(-4deg);
  }
}
 @keyframes rope__inner {
   0% {
     transform: rotate(-15deg);
  }
   100% {
     transform: rotate(-15deg) translateY(3px);
  }
}
 @keyframes reindeer__leg-front {
   0% {
     transform: rotate(-24deg);
  }
   100% {
     transform: rotate(-13deg);
  }
}
 @keyframes reindeer__leg-front-extension {
   0% {
     transform: rotate(131deg);
  }
   100% {
     transform: rotate(0);
  }
}
 @keyframes reindeer__leg-back {
   0% {
     transform: rotate(-73deg);
  }
   100% {
     transform: rotate(-95deg);
  }
}
 @keyframes reindeer__leg-back-extension {
   0% {
     top: 4px;
     left: -4px;
     transform: rotate(50deg);
  }
   100% {
     top: 0;
     left: 0;
     transform: rotate(0);
  }
}
 @keyframes snow {
   0% {
     fill-opacity: 1;
  }
   100% {
     fill-opacity: 0;
     transform: translateY(50%);
  }
}
 body{
  position: relative;
 }
  canvas{
    position: fixed;top: 0;
    width: 100%;
    overflow-x:hidden;
    z-index:-1
  }
.cont__santaWrapper{
  /*display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  overflow: hidden;*/
 }
 .santaWrapper {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 430px;
   height: 155px;
   transform: translateX(-100%);
   animation: santa__mov 22s linear infinite;
   z-index: 12;
}
 .santaWrapper .santa {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 125px;
   height: 107px;
   transform: rotateY(180deg);
}
 .santaWrapper .santa:before, .santaWrapper .santa:after {
   content: "";
   position: absolute;
   bottom: 0;
   background-color: #520d0d;
}
 .santaWrapper .santa:before {
   left: -10px;
   width: 126px;
   height: 30px;
   border-radius: 10px 50% 10px 50%;
   transform: rotate(0);
   z-index: 10;
}
 .santaWrapper .santa:after {
   left: 70px;
   width: 50px;
   height: 53px;
   border-radius: 50% 10px 22px 10px;
   transform: rotate(8deg);
}
 .santaWrapper .santa .hat > * {
   position: absolute;
   top: 7px;
   left: 31px;
   width: 43px;
   height: 58px;
   border-radius: 50%;
   transform: rotate(28deg);
   background-color: #d63527;
}
 .santaWrapper .santa .hat > *:nth-child(1):before, .santaWrapper .santa .hat > *:nth-child(1):after {
   content: "";
   position: absolute;
}
 .santaWrapper .santa .hat > *:nth-child(1):before {
   top: 9px;
   left: 45px;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background-color: #fff;
}
 .santaWrapper .santa .hat > *:nth-child(1):after {
   top: 3px;
   left: 19px;
   width: 30px;
   height: 7px;
   border-radius: 50%;
   transform: rotate(22deg);
   background-color: #d63527;
}
 .santaWrapper .santa .hat > *:nth-child(2) {
   position: absolute;
   top: 18px;
   left: 31px;
   width: 44px;
   height: 34px;
   border-radius: 50%;
   transform: rotate(12deg);
   background-color: #fff;
}
 .santaWrapper .santa .face {
   position: absolute;
   top: 25px;
   left: 37px;
   width: 31px;
   height: 17px;
   border-radius: 20px 20px 50% 50%;
   transform: rotate(10deg);
   background-color: #fde2b7;
   z-index: 10;
}
 .santaWrapper .santa .face .eyeBrows {
   position: absolute;
   top: 0;
   left: 0;
   width: 2px;
   height: 7px;
   border-radius: 50%;
   background-color: #fff;
}
 .santaWrapper .santa .face .eyeBrows.left {
   top: 2px;
   left: 22px;
   transform: rotate(-65deg);
}
 .santaWrapper .santa .face .eyeBrows.right {
   top: 1px;
   left: 4px;
   transform: rotate(65deg);
}
 .santaWrapper .santa .face .eye {
   position: absolute;
   top: 8px;
   left: 2px;
   width: 3px;
   height: 4px;
   border-radius: 50%;
   background-color: #000;
}
 .santaWrapper .santa .face .eye.left {
   top: 8px;
   left: 2px;
}
 .santaWrapper .santa .face .eye.right {
   top: 8px;
   left: 20px;
}
 .santaWrapper .santa .face .nose {
   position: absolute;
   top: 10px;
   left: 6px;
   width: 12px;
   height: 9px;
   border-radius: 50%;
   z-index: 10;
   background-color: #f7d194;
}
 .santaWrapper .santa .face .cheek {
   position: absolute;
   top: 10px;
   left: 6px;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   z-index: 10;
   background-color: #f4cfe3;
}
 .santaWrapper .santa .face .cheek.left {
   top: 12px;
   left: -3px;
}
 .santaWrapper .santa .face .cheek.right {
   top: 13px;
   left: 22px;
}
 .santaWrapper .santa .face .beard > * {
   position: absolute;
   top: 8px;
   left: -14px;
   width: 15px;
   height: 17px;
   border-radius: 50%;
   background-color: #fff;
}
 .santaWrapper .santa .face .beard > *:before, .santaWrapper .santa .face .beard > *:after {
   content: "";
   position: absolute;
   background-color: #fff;
}
 .santaWrapper .santa .face .beard > *:before {
   top: 12px;
   left: 1px;
   width: 15px;
   height: 17px;
   border-radius: 50%;
}
 .santaWrapper .santa .face .beard > *:nth-child(2) {
   top: 16px;
   left: -8px;
   width: 26px;
   height: 30px;
}
 .santaWrapper .santa .face .beard > *:nth-child(2):before {
   top: 16px;
   left: 13px;
   width: 19px;
   height: 17px;
}
 .santaWrapper .santa .face .beard > *:nth-child(2):after {
   top: 1px;
   left: 13px;
   width: 19px;
   height: 17px;
}
 .santaWrapper .santa .face .beard > *:nth-child(3) {
   top: 16px;
   left: 14px;
   width: 27px;
   height: 28px;
}
 .santaWrapper .santa .face .beard > *:nth-child(3):before {
   top: -4px;
   left: 13px;
   width: 17px;
   height: 17px;
}
 .santaWrapper .santa .body {
   position: absolute;
   top: 54px;
   left: 16px;
   width: 88px;
   height: 53px;
}
 .santaWrapper .santa .body:before {
   content: "";
   position: absolute;
   top: -23px;
   right: -10px;
   width: 53px;
   height: 51px;
   border-radius: 42% 50%;
   background-color: #f3f0f0;
   z-index: -1;
}
 .santaWrapper .santa .body .sweater {
   top: -3px;
   left: 10px;
   position: absolute;
   width: 45px;
   height: 39px;
   border-radius: 50% 50% 10% 10%;
   background-color: #d63527;
   z-index: 5;
}
 .santaWrapper .santa .body .sweater:before {
   content: "";
   top: 28px;
   left: 0px;
   position: absolute;
   width: 45px;
   height: 5px;
   background-color: #000;
   transform: rotate(1deg);
}
 .santaWrapper .santa .body .sweater:after {
   content: "";
   top: 27px;
   left: 10px;
   position: absolute;
   width: 7px;
   height: 5px;
   background-color: #000;
   border: 1px solid #fff;
   border-radius: 3px;
   transform: rotate(1deg);
}
 .santaWrapper .santa .body .hand {
   position: absolute;
}
 .santaWrapper .santa .body .hand.left {
   top: 5px;
   left: 19px;
   width: 33px;
   height: 30px;
   overflow: hidden;
}
 .santaWrapper .santa .body .hand.left .inner {
   position: absolute;
   top: 10px;
   left: 8px;
   width: 49px;
   z-index: 100;
   height: 7px;
   border-radius: 10px;
   transform: rotate(12deg);
   background-color: #d63527;
   animation: santa__hand-right 0.3s linear alternate infinite;
}
 .santaWrapper .santa .body .hand.left .inner:before {
   content: "";
   position: absolute;
   width: 8px;
   height: 7px;
   top: -2px;
   left: -6px;
   background-color: #000;
   border-radius: 50%;
   transform: rotate(25deg);
}
 .santaWrapper .santa .body .hand.right {
   top: 4px;
   left: 3px;
   width: 11px;
   height: 7px;
   border-radius: 10px;
   background-color: #d63527;
   transform: rotate(25deg);
   animation: santa__hand-left 0.3s linear alternate infinite;
}
 .santaWrapper .santa .body .hand.right:before {
   content: "";
   position: absolute;
   width: 8px;
   height: 7px;
   top: -2px;
   left: -6px;
   background-color: #000;
   border-radius: 50%;
   transform: rotate(10deg);
}
 .santaWrapper .rope {
   position: absolute;
   top: 92px;
   left: 84px;
   width: 182px;
   height: 33px;
   overflow: hidden;
   z-index: 10;
   transform: rotate(0deg);
   transform-origin: bottom right;
   animation: rope__right 0.3s linear alternate infinite;
}
 .santaWrapper .rope.back {
   top: 85px;
   left: 105px;
   width: 149px;
   transform: rotate(4deg);
   z-index: 0;
   transform-origin: top left;
   animation: rope__left 0.3s linear alternate infinite;
}
 .santaWrapper .rope:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: -12px;
   width: 100%;
   height: 48px;
   border-bottom: 1px solid #fff;
   border-radius: 50%;
}
 .santaWrapper .sled {
   position: absolute;
   bottom: -12px;
   left: 0px;
   width: 145px;
   height: 11px;
   transform: rotate(-3deg);
   border-bottom: 5px solid #690e00;
   border-right: 5px solid #690e00;
   border-radius: 10px;
   z-index: 10;
}
 .santaWrapper .sled:before, .santaWrapper .sled:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 5px;
   height: 5px;
   background-color: #690e00;
}
 .santaWrapper .sled:before {
   top: 2px;
   left: 34px;
   height: 9px;
}
 .santaWrapper .sled:after {
   top: 3px;
   left: 108px;
   width: 5px;
   height: 8px;
}
 .santaWrapper .reindeer {
   position: absolute;
   width: 115px;
   height: 155px;
   top: 50px;
   right: 0;
   transform: rotate(14deg) translateX(calc(-100% - 30px));
   z-index: 0;
}
 .santaWrapper .reindeer.second {
   top: 0;
   transform: rotate(14deg);
}
 .santaWrapper .reindeer.second .rope {
   top: 70px;
   left: -55px;
   width: 155px;
   transform: rotate(-15deg);
   animation: rope__inner 0.3s linear alternate infinite;
}
 .santaWrapper .reindeer:before {
   content: "";
   position: absolute;
   top: 65px;
   left: 76px;
   width: 8px;
   height: 31px;
   background-color: #520d0d;
   z-index: 10;
   transform: rotate(-55deg);
}
 .santaWrapper .reindeer:after {
   content: "";
   position: absolute;
}
 .santaWrapper .reindeer .face {
   position: absolute;
   width: 30px;
   height: 22px;
   top: 44px;
   left: 72px;
   border-radius: 10px 10px 50% 50%;
   transform: rotate(-3deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .face:before {
   content: "";
   position: absolute;
   background-color: #cca58b;
   width: 29px;
   height: 16px;
   border-radius: 50%;
   top: 0px;
   left: 11px;
   transform: rotate(-49deg);
}
 .santaWrapper .reindeer .face:after {
   content: "";
   position: absolute;
   background-color: #000;
   width: 5px;
   height: 5px;
   border-radius: 50%;
   top: -8px;
   left: 31px;
}
 .santaWrapper .reindeer .face .ear {
   position: absolute;
   width: 21px;
   height: 11px;
   top: 4px;
   left: -18px;
   border-radius: 4px 0 50% 50%;
   transform: rotate(4deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .face .ear:before {
   content: "";
   position: absolute;
   top: -2px;
   left: 34px;
   width: 4px;
   height: 5px;
   border-radius: 50%;
   transform: rotate(-35deg);
   background-color: #000;
}
 .santaWrapper .reindeer .face .horn {
   position: absolute;
   width: 29px;
   height: 4px;
   top: -7px;
   left: -21px;
   border-radius: 2px;
   transform: rotate(38deg);
   background-color: #f0dbc2;
}
 .santaWrapper .reindeer .face .horn:before, .santaWrapper .reindeer .face .horn:after {
   content: "";
   position: absolute;
   background-color: #f0dbc2;
   border-radius: 2px;
}
 .santaWrapper .reindeer .face .horn.left {
   top: -7px;
   left: -21px;
}
 .santaWrapper .reindeer .face .horn.left:before {
   top: -4px;
   left: 6px;
   width: 14px;
   height: 4px;
   transform: rotate(43deg);
}
 .santaWrapper .reindeer .face .horn.left:after {
   top: -4px;
   left: 13px;
   width: 14px;
   height: 4px;
   -webkit-transform: rotate(43deg);
   transform: rotate(53deg);
}
 .santaWrapper .reindeer .face .horn.right {
   top: -12px;
   left: -6px;
   width: 24px;
   transform: rotate(62deg);
}
 .santaWrapper .reindeer .face .horn.right:before {
   top: -3px;
   left: 5px;
   width: 10px;
   height: 4px;
   transform: rotate(43deg);
}
 .santaWrapper .reindeer .face .horn.right:after {
   top: -3px;
   left: 11px;
   width: 10px;
   height: 4px;
   transform: rotate(53deg);
}
 .santaWrapper .reindeer .body {
   position: absolute;
   width: 58px;
   height: 31px;
   top: 84px;
   left: 28px;
   border-radius: 50% 0;
   transform: rotate(-3deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body:before {
   content: "";
   position: absolute;
   width: 46px;
   height: 26px;
   top: -15px;
   left: 32px;
   border-radius: 0 0 50% 50%;
   -webkit-transform: rotate(-3deg);
   transform: rotate(-55deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body:after {
   content: "";
   position: absolute;
   width: 43px;
   height: 26px;
   top: -11px;
   left: 29px;
   border-radius: 0 0 50% 50%;
   -webkit-transform: rotate(-3deg);
   transform: rotate(-30deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body .foot.front .inner {
   position: absolute;
   width: 40px;
   height: 8px;
   top: 13px;
   left: 35px;
   border-radius: 0 50%;
   transform: rotate(-17deg);
   background-color: #cca58b;
   animation: reindeer__leg-front 0.3s linear alternate infinite;
}
 .santaWrapper .reindeer .body .foot.front .inner .extension {
   position: absolute;
   width: 28px;
   height: 8px;
   top: 3px;
   left: 100%;
   border-radius: 2px 50%;
   transform: rotate(131deg);
   background-color: #cca58b;
   transform-origin: top left;
   animation: reindeer__leg-front-extension 0.2s linear alternate infinite;
}
 .santaWrapper .reindeer .body .foot.front .inner .extension:after {
   content: "";
   position: absolute;
   top: 0;
   right: -2px;
   width: 7px;
   height: 8px;
   border-radius: 2px;
   background-color: #000;
}
 .santaWrapper .reindeer .body .foot.back .inner {
   position: absolute;
   width: 56px;
   height: 9px;
   top: 37px;
   left: -29px;
   border-radius: 0 50%;
   transform: rotate(-73deg);
   animation: reindeer__leg-back 0.3s linear alternate infinite;
}
 .santaWrapper .reindeer .body .foot.back .inner:before {
   content: "";
   position: absolute;
   width: 25px;
   height: 16px;
   top: 4px;
   left: 25px;
   border-radius: 0 50%;
   transform: rotate(15deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body .foot.back .inner:after {
   content: "";
   position: absolute;
   right: 0;
   width: 65%;
   height: 100%;
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body .foot.back .inner .extension {
   position: absolute;
   top: 0;
   left: 0;
   width: 28px;
   height: 8px;
   background: #cca58b;
   border-radius: 2px 50%;
   transform-origin: top right;
   animation: reindeer__leg-back-extension 0.2s linear alternate infinite;
}
 .santaWrapper .reindeer .body .foot.back .inner .extension:after {
   content: "";
   position: absolute;
   width: 8px;
   height: 9px;
   top: -2px;
   left: -2px;
   border-radius: 2px 0 2px 2px;
   transform: rotate(14deg);
   background-color: #000;
}
 .santaWrapper .reindeer .body .tail {
   position: absolute;
   width: 27px;
   height: 26px;
   top: 6px;
   left: -8px;
   border-radius: 50% 2px;
   transform: rotate(-17deg);
   background-color: #cca58b;
}
 .santaWrapper .reindeer .body .tail:before {
   content: "";
   position: absolute;
   background-color: #cca58b;
   border-radius: 50%;
   top: -2px;
   left: -3px;
   width: 15px;
   height: 5px;
   transform: rotate(25deg);
}
 .countdownSection .container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   align-content: center;
   width: 90%;
   padding: 50px 0;
}
 .countdownSection .container .counterWrapper {
   width: 100%;
   text-align: center;
   position: relative;
   z-index: 1;
}
 .countdownSection .container .counterWrapper p {
   background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/navidad%2Fpattern-2.jpg?alt=media&token=c3ebea10-d285-4b2a-846b-12154d670bf2);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 100px;
}
 .countdownSection .container .counterWrapper .countdown {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   align-content: center;
}
 .countdownSection .container .counterWrapper .countdown .countdownProp {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   align-content: center;
   width: 240px;
   margin: 10px;
   font-size: 200px;
   line-height: 150px;
   background-image: url(https://firebasestorage.googleapis.com/v0/b/fotos-3cba1.appspot.com/o/navidad%2Fpattern-1.png?alt=media&token=e62eb3c2-bea0-49ae-a398-ab426f5605c1);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-shadow: 0 0 100px #fff;
}
 .countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
   content: ":";
}
 .countdownSection .container .counterWrapper .countdown .countdownProp:after {
   content: attr(date-count);
   width: 100%;
   font-size: 20px;
   -webkit-text-fill-color: #fff;
   line-height: normal;
}
 @media only screen and (max-width: 700px) {
   .countdownSection .decorations .decoration {
     width: 300px;
     height: 300px;
  }
   .countdownSection .container .counterWrapper p {
     font-size: 70px;
  }
   .countdownSection .container .counterWrapper .countdown {
     margin: 20px 0;
  }
   .countdownSection .container .counterWrapper .countdown .countdownProp {
     width: 120px;
     font-size: 100px;
     line-height: 80px;
  }
}
 @media only screen and (max-width: 500px) {
  .santaWrapper {
     /*display: none;*/
  }
   .countdownSection .container .counterWrapper p {
     font-size: 50px;
  }
   .countdownSection .container .counterWrapper .countdown .countdownProp {
     display: block;
  }
   .countdownSection .container .counterWrapper .countdown .countdownProp:not(:first-child):before {
     display: none;
  }
   .countdownSection .container .counterWrapper .countdown .countdownProp:after {
     display: block;
  }
}