@import "../../../style/colors";
svg {
  shape-rendering: geometricPrecision
}

g, path, circle, rect {
  transform-origin: 50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 12s;
  animation-direction: normal;
}

.climacon_component-stroke_snow {
  fill-opacity: 0;
  animation-name: snow-snowFall, snow-fillOpacity2;
  animation-timing-function: ease-in-out;
  animation-duration: 6s;
}

.climacon_component-stroke_snow:nth-child(3) {
  animation-name: snow-snowFall2, snow-fillOpacity2;
}

.climacon_component-stroke_snow:nth-child(1) {
  animation-delay: 0s;
}

.climacon_component-stroke_snow:nth-child(2) {
  animation-delay: 2s;
}

.climacon_component-stroke_snow:nth-child(3) {
  animation-delay: 4s;
}

.climacon_wrapperComponent-snow {
  fill: $color-snow;
}

.climacon_wrapperComponent-cloud {
  fill: $color-cloud;
}

@keyframes snow-snowFall {
  0% {
    transform: translateY(0px) translateX(0px);
  }

  1% {
    transform: translateY(0.175px) translateX(0.38478px);
  }

  2% {
    transform: translateY(0.35px) translateX(0.75349px);
  }

  3% {
    transform: translateY(0.525px) translateX(1.10577px);
  }

  4% {
    transform: translateY(0.7px) translateX(1.44133px);
  }

  5% {
    transform: translateY(0.875px) translateX(1.75989px);
  }

  6% {
    transform: translateY(1.05px) translateX(2.06119px);
  }

  7% {
    transform: translateY(1.225px) translateX(2.34504px);
  }

  8% {
    transform: translateY(1.4px) translateX(2.61124px);
  }

  9% {
    transform: translateY(1.575px) translateX(2.85966px);
  }

  10% {
    transform: translateY(1.75px) translateX(3.09017px);
  }

  11% {
    transform: translateY(1.925px) translateX(3.30269px);
  }

  12% {
    transform: translateY(2.1px) translateX(3.49718px);
  }

  13% {
    transform: translateY(2.275px) translateX(3.67362px);
  }

  14% {
    transform: translateY(2.45px) translateX(3.83201px);
  }

  15% {
    transform: translateY(2.625px) translateX(3.97242px);
  }

  16% {
    transform: translateY(2.8px) translateX(4.09491px);
  }

  17% {
    transform: translateY(2.975px) translateX(4.19959px);
  }

  18% {
    transform: translateY(3.15px) translateX(4.28661px);
  }

  19% {
    transform: translateY(3.325px) translateX(4.35615px);
  }

  20% {
    transform: translateY(3.5px) translateX(4.40839px);
  }

  21% {
    transform: translateY(3.675px) translateX(4.44358px);
  }

  22% {
    transform: translateY(3.85px) translateX(4.46197px);
  }

  23% {
    transform: translateY(4.025px) translateX(4.46386px);
  }

  24% {
    transform: translateY(4.2px) translateX(4.44956px);
  }

  25% {
    transform: translateY(4.375px) translateX(4.41942px);
  }

  26% {
    transform: translateY(4.55px) translateX(4.37381px);
  }

  27% {
    transform: translateY(4.725px) translateX(4.31314px);
  }

  28% {
    transform: translateY(4.9px) translateX(4.23782px);
  }

  29% {
    transform: translateY(5.075px) translateX(4.14831px);
  }

  30% {
    transform: translateY(5.25px) translateX(4.04508px);
  }

  31% {
    transform: translateY(5.425px) translateX(3.92863px);
  }

  32% {
    transform: translateY(5.6px) translateX(3.79948px);
  }

  33% {
    transform: translateY(5.775px) translateX(3.65815px);
  }

  34% {
    transform: translateY(5.95px) translateX(3.50523px);
  }

  35% {
    transform: translateY(6.125px) translateX(3.34127px);
  }

  36% {
    transform: translateY(6.3px) translateX(3.16689px);
  }

  37% {
    transform: translateY(6.475px) translateX(2.9827px);
  }

  38% {
    transform: translateY(6.65px) translateX(2.78933px);
  }

  39% {
    transform: translateY(6.825px) translateX(2.58742px);
  }

  40% {
    transform: translateY(7px) translateX(2.37764px);
  }

  41% {
    transform: translateY(7.175px) translateX(2.16066px);
  }

  42% {
    transform: translateY(7.35px) translateX(1.93717px);
  }

  43% {
    transform: translateY(7.525px) translateX(1.70785px);
  }

  44% {
    transform: translateY(7.7px) translateX(1.47343px);
  }

  45% {
    transform: translateY(7.875px) translateX(1.23461px);
  }

  46% {
    transform: translateY(8.05px) translateX(0.99211px);
  }

  47% {
    transform: translateY(8.225px) translateX(0.74667px);
  }

  48% {
    transform: translateY(8.4px) translateX(0.49901px);
  }

  49% {
    transform: translateY(8.575px) translateX(0.24988px);
  }

  50% {
    transform: translateY(8.75px) translateX(0px);
  }

  51% {
    transform: translateY(8.925px) translateX(-0.24988px);
  }

  52% {
    transform: translateY(9.1px) translateX(-0.49901px);
  }

  53% {
    transform: translateY(9.275px) translateX(-0.74667px);
  }

  54% {
    transform: translateY(9.45px) translateX(-0.99211px);
  }

  55% {
    transform: translateY(9.625px) translateX(-1.23461px);
  }

  56% {
    transform: translateY(9.8px) translateX(-1.47343px);
  }

  57% {
    transform: translateY(9.975px) translateX(-1.70785px);
  }

  58% {
    transform: translateY(10.15px) translateX(-1.93717px);
  }

  59% {
    transform: translateY(10.325px) translateX(-2.16066px);
  }

  60% {
    transform: translateY(10.5px) translateX(-2.37764px);
  }

  61% {
    transform: translateY(10.675px) translateX(-2.58742px);
  }

  62% {
    transform: translateY(10.85px) translateX(-2.78933px);
  }

  63% {
    transform: translateY(11.025px) translateX(-2.9827px);
  }

  64% {
    transform: translateY(11.2px) translateX(-3.16689px);
  }

  65% {
    transform: translateY(11.375px) translateX(-3.34127px);
  }

  66% {
    transform: translateY(11.55px) translateX(-3.50523px);
  }

  67% {
    transform: translateY(11.725px) translateX(-3.65815px);
  }

  68% {
    transform: translateY(11.9px) translateX(-3.79948px);
  }

  69% {
    transform: translateY(12.075px) translateX(-3.92863px);
  }

  70% {
    transform: translateY(12.25px) translateX(-4.04508px);
  }

  71% {
    transform: translateY(12.425px) translateX(-4.14831px);
  }

  72% {
    transform: translateY(12.6px) translateX(-4.23782px);
  }

  73% {
    transform: translateY(12.775px) translateX(-4.31314px);
  }

  74% {
    transform: translateY(12.95px) translateX(-4.37381px);
  }

  75% {
    transform: translateY(13.125px) translateX(-4.41942px);
  }

  76% {
    transform: translateY(13.3px) translateX(-4.44956px);
  }

  77% {
    transform: translateY(13.475px) translateX(-4.46386px);
  }

  78% {
    transform: translateY(13.65px) translateX(-4.46197px);
  }

  79% {
    transform: translateY(13.825px) translateX(-4.44358px);
  }

  80% {
    transform: translateY(14px) translateX(-4.40839px);
  }

  81% {
    transform: translateY(14.175px) translateX(-4.35615px);
  }

  82% {
    transform: translateY(14.35px) translateX(-4.28661px);
  }

  83% {
    transform: translateY(14.525px) translateX(-4.19959px);
  }

  84% {
    transform: translateY(14.7px) translateX(-4.09491px);
  }

  85% {
    transform: translateY(14.875px) translateX(-3.97242px);
  }

  86% {
    transform: translateY(15.05px) translateX(-3.83201px);
  }

  87% {
    transform: translateY(15.225px) translateX(-3.67362px);
  }

  88% {
    transform: translateY(15.4px) translateX(-3.49718px);
  }

  89% {
    transform: translateY(15.575px) translateX(-3.30269px);
  }

  90% {
    transform: translateY(15.75px) translateX(-3.09017px);
  }

  91% {
    transform: translateY(15.925px) translateX(-2.85966px);
  }

  92% {
    transform: translateY(16.1px) translateX(-2.61124px);
  }

  93% {
    transform: translateY(16.275px) translateX(-2.34504px);
  }

  94% {
    transform: translateY(16.45px) translateX(-2.06119px);
  }

  95% {
    transform: translateY(16.625px) translateX(-1.75989px);
  }

  96% {
    transform: translateY(16.8px) translateX(-1.44133px);
  }

  97% {
    transform: translateY(16.975px) translateX(-1.10577px);
  }

  98% {
    transform: translateY(17.15px) translateX(-0.75349px);
  }

  99% {
    transform: translateY(17.325px) translateX(-0.38478px);
  }

  100% {
    transform: translateY(17.5px) translateX(0.0px);
  }
}

@keyframes snow-snowFall2 {
  0% {
    transform: translateY(0px) translateX(0px);
  }

  1% {
    transform: translateY(0.175px) translateX(-0.38478px);
  }

  2% {
    transform: translateY(0.35px) translateX(-0.75349px);
  }

  3% {
    transform: translateY(0.525px) translateX(-1.10577px);
  }

  4% {
    transform: translateY(0.7px) translateX(-1.44133px);
  }

  5% {
    transform: translateY(0.875px) translateX(-1.75989px);
  }

  6% {
    transform: translateY(1.05px) translateX(-2.06119px);
  }

  7% {
    transform: translateY(1.225px) translateX(-2.34504px);
  }

  8% {
    transform: translateY(1.4px) translateX(-2.61124px);
  }

  9% {
    transform: translateY(1.575px) translateX(-2.85966px);
  }

  10% {
    transform: translateY(1.75px) translateX(-3.09017px);
  }

  11% {
    transform: translateY(1.925px) translateX(-3.30269px);
  }

  12% {
    transform: translateY(2.1px) translateX(-3.49718px);
  }

  13% {
    transform: translateY(2.275px) translateX(-3.67362px);
  }

  14% {
    transform: translateY(2.45px) translateX(-3.83201px);
  }

  15% {
    transform: translateY(2.625px) translateX(-3.97242px);
  }

  16% {
    transform: translateY(2.8px) translateX(-4.09491px);
  }

  17% {
    transform: translateY(2.975px) translateX(-4.19959px);
  }

  18% {
    transform: translateY(3.15px) translateX(-4.28661px);
  }

  19% {
    transform: translateY(3.325px) translateX(-4.35615px);
  }

  20% {
    transform: translateY(3.5px) translateX(-4.40839px);
  }

  21% {
    transform: translateY(3.675px) translateX(-4.44358px);
  }

  22% {
    transform: translateY(3.85px) translateX(-4.46197px);
  }

  23% {
    transform: translateY(4.025px) translateX(-4.46386px);
  }

  24% {
    transform: translateY(4.2px) translateX(-4.44956px);
  }

  25% {
    transform: translateY(4.375px) translateX(-4.41942px);
  }

  26% {
    transform: translateY(4.55px) translateX(-4.37381px);
  }

  27% {
    transform: translateY(4.725px) translateX(-4.31314px);
  }

  28% {
    transform: translateY(4.9px) translateX(-4.23782px);
  }

  29% {
    transform: translateY(5.075px) translateX(-4.14831px);
  }

  30% {
    transform: translateY(5.25px) translateX(-4.04508px);
  }

  31% {
    transform: translateY(5.425px) translateX(-3.92863px);
  }

  32% {
    transform: translateY(5.6px) translateX(-3.79948px);
  }

  33% {
    transform: translateY(5.775px) translateX(-3.65815px);
  }

  34% {
    transform: translateY(5.95px) translateX(-3.50523px);
  }

  35% {
    transform: translateY(6.125px) translateX(-3.34127px);
  }

  36% {
    transform: translateY(6.3px) translateX(-3.16689px);
  }

  37% {
    transform: translateY(6.475px) translateX(-2.9827px);
  }

  38% {
    transform: translateY(6.65px) translateX(-2.78933px);
  }

  39% {
    transform: translateY(6.825px) translateX(-2.58742px);
  }

  40% {
    transform: translateY(7px) translateX(-2.37764px);
  }

  41% {
    transform: translateY(7.175px) translateX(-2.16066px);
  }

  42% {
    transform: translateY(7.35px) translateX(-1.93717px);
  }

  43% {
    transform: translateY(7.525px) translateX(-1.70785px);
  }

  44% {
    transform: translateY(7.7px) translateX(-1.47343px);
  }

  45% {
    transform: translateY(7.875px) translateX(-1.23461px);
  }

  46% {
    transform: translateY(8.05px) translateX(-0.99211px);
  }

  47% {
    transform: translateY(8.225px) translateX(-0.74667px);
  }

  48% {
    transform: translateY(8.4px) translateX(-0.49901px);
  }

  49% {
    transform: translateY(8.575px) translateX(-0.24988px);
  }

  50% {
    transform: translateY(8.75px) translateX(0px);
  }

  51% {
    transform: translateY(8.925px) translateX(0.24988px);
  }

  52% {
    transform: translateY(9.1px) translateX(0.49901px);
  }

  53% {
    transform: translateY(9.275px) translateX(0.74667px);
  }

  54% {
    transform: translateY(9.45px) translateX(0.99211px);
  }

  55% {
    transform: translateY(9.625px) translateX(1.23461px);
  }

  56% {
    transform: translateY(9.8px) translateX(1.47343px);
  }

  57% {
    transform: translateY(9.975px) translateX(1.70785px);
  }

  58% {
    transform: translateY(10.15px) translateX(1.93717px);
  }

  59% {
    transform: translateY(10.325px) translateX(2.16066px);
  }

  60% {
    transform: translateY(10.5px) translateX(2.37764px);
  }

  61% {
    transform: translateY(10.675px) translateX(2.58742px);
  }

  62% {
    transform: translateY(10.85px) translateX(2.78933px);
  }

  63% {
    transform: translateY(11.025px) translateX(2.9827px);
  }

  64% {
    transform: translateY(11.2px) translateX(3.16689px);
  }

  65% {
    transform: translateY(11.375px) translateX(3.34127px);
  }

  66% {
    transform: translateY(11.55px) translateX(3.50523px);
  }

  67% {
    transform: translateY(11.725px) translateX(3.65815px);
  }

  68% {
    transform: translateY(11.9px) translateX(3.79948px);
  }

  69% {
    transform: translateY(12.075px) translateX(3.92863px);
  }

  70% {
    transform: translateY(12.25px) translateX(4.04508px);
  }

  71% {
    transform: translateY(12.425px) translateX(4.14831px);
  }

  72% {
    transform: translateY(12.6px) translateX(4.23782px);
  }

  73% {
    transform: translateY(12.775px) translateX(4.31314px);
  }

  74% {
    transform: translateY(12.95px) translateX(4.37381px);
  }

  75% {
    transform: translateY(13.125px) translateX(4.41942px);
  }

  76% {
    transform: translateY(13.3px) translateX(4.44956px);
  }

  77% {
    transform: translateY(13.475px) translateX(4.46386px);
  }

  78% {
    transform: translateY(13.65px) translateX(4.46197px);
  }

  79% {
    transform: translateY(13.825px) translateX(4.44358px);
  }

  80% {
    transform: translateY(14px) translateX(4.40839px);
  }

  81% {
    transform: translateY(14.175px) translateX(4.35615px);
  }

  82% {
    transform: translateY(14.35px) translateX(4.28661px);
  }

  83% {
    transform: translateY(14.525px) translateX(4.19959px);
  }

  84% {
    transform: translateY(14.7px) translateX(4.09491px);
  }

  85% {
    transform: translateY(14.875px) translateX(3.97242px);
  }

  86% {
    transform: translateY(15.05px) translateX(3.83201px);
  }

  87% {
    transform: translateY(15.225px) translateX(3.67362px);
  }

  88% {
    transform: translateY(15.4px) translateX(3.49718px);
  }

  89% {
    transform: translateY(15.575px) translateX(3.30269px);
  }

  90% {
    transform: translateY(15.75px) translateX(3.09017px);
  }

  91% {
    transform: translateY(15.925px) translateX(2.85966px);
  }

  92% {
    transform: translateY(16.1px) translateX(2.61124px);
  }

  93% {
    transform: translateY(16.275px) translateX(2.34504px);
  }

  94% {
    transform: translateY(16.45px) translateX(2.06119px);
  }

  95% {
    transform: translateY(16.625px) translateX(1.75989px);
  }

  96% {
    transform: translateY(16.8px) translateX(1.44133px);
  }

  97% {
    transform: translateY(16.975px) translateX(1.10577px);
  }

  98% {
    transform: translateY(17.15px) translateX(0.75349px);
  }

  99% {
    transform: translateY(17.325px) translateX(0.38478px);
  }

  100% {
    transform: translateY(17.5px) translateX(0.0px);
  }
}

@keyframes snow-fillOpacity2 {
  0% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }

  50% {
    fill-opacity: 1;
    stroke-opacity: 1;
  }

  100% {
    fill-opacity: 0;
    stroke-opacity: 0;
  }
}