.snowflakes {
position: relative;
z-index: 99999;
pointer-events: none;
transition: opacity 0.5s ease;
}
.snowflakes.is-hidden {
opacity: 0;
}
.snowflake {
color: #fff;
font-size: 2em;
font-family: Arial, sans-serif;
position: fixed;
top: -10%;
user-select: none; animation-name: snowflakes-fall, snowflakes-shake;
animation-duration: 10s, 3s;
animation-timing-function: linear, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-play-state: running, running;
} .snowflake-inner {
display: inline-block;
animation-name: snowflakes-rotate;
animation-duration: 8s;
animation-timing-function: linear;
animation-iteration-count: infinite;
} .snowflake:nth-of-type(odd) .snowflake-inner {
animation-direction: reverse;
} @keyframes snowflakes-fall {
0% { top: -10%; }
100% { top: 100%; }
}
@keyframes snowflakes-shake {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(80px); }
}
@keyframes snowflakes-rotate {
0%   { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media (max-width: 991px) {
.snowflake {
font-size: 25px !important;
}
.snowflake:nth-child(odd) {
display: none !important;
}
} .snowflake:nth-of-type(odd) {
animation-direction: normal, normal, reverse;
} .snowflake:nth-of-type(1)  { left: 2%;  animation-delay: 0s, 0s; }
.snowflake:nth-of-type(2)  { left: 7%;  animation-delay: 1s, 1s; }
.snowflake:nth-of-type(3)  { left: 12%; animation-delay: 6s, .5s; }
.snowflake:nth-of-type(4)  { left: 17%; animation-delay: 4s, 2s; }
.snowflake:nth-of-type(5)  { left: 22%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(6)  { left: 27%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(7)  { left: 32%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(8)  { left: 37%; animation-delay: 2.5s, 1s; }
.snowflake:nth-of-type(9)  { left: 42%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(10) { left: 47%; animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(11) { left: 52%; animation-delay: 4s, 1s; }
.snowflake:nth-of-type(12) { left: 57%; animation-delay: 5s, 2s; }
.snowflake:nth-of-type(13) { left: 62%; animation-delay: 6s, 0s; }
.snowflake:nth-of-type(14) { left: 67%; animation-delay: 1s, 2s; }
.snowflake:nth-of-type(15) { left: 72%; animation-delay: 7s, 3s; }
.snowflake:nth-of-type(16) { left: 77%; animation-delay: 3s, 1s; }
.snowflake:nth-of-type(17) { left: 82%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(18) { left: 87%; animation-delay: 4s, 0s; }
.snowflake:nth-of-type(19) { left: 92%; animation-delay: 5s, 2.5s; }
.snowflake:nth-of-type(20) { left: 97%; animation-delay: 6s, 1s; }
.snowflake:nth-of-type(21) { left: 4%;  animation-delay: 2s, 1s; }
.snowflake:nth-of-type(22) { left: 9%;  animation-delay: 7s, 3s; }
.snowflake:nth-of-type(23) { left: 14%; animation-delay: 1s, 0s; }
.snowflake:nth-of-type(24) { left: 19%; animation-delay: 3s, 2s; }
.snowflake:nth-of-type(25) { left: 24%; animation-delay: 5s, 1s; }
.snowflake:nth-of-type(26) { left: 29%; animation-delay: 2s, 2s; }
.snowflake:nth-of-type(27) { left: 34%; animation-delay: 6s, 1.5s; }
.snowflake:nth-of-type(28) { left: 39%; animation-delay: 4s, 0.5s; }
.snowflake:nth-of-type(29) { left: 44%; animation-delay: 7s, 3s; }
.snowflake:nth-of-type(30) { left: 49%; animation-delay: 1s, 2s; }
.snowflake:nth-of-type(31) { left: 54%; animation-delay: 8s, 3s; }
.snowflake:nth-of-type(32) { left: 59%; animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(33) { left: 64%; animation-delay: 2s, 0.5s; }
.snowflake:nth-of-type(34) { left: 69%; animation-delay: 5s, 2s; }
.snowflake:nth-of-type(35) { left: 74%; animation-delay: 4s, 1s; }
.snowflake:nth-of-type(36) { left: 79%; animation-delay: 7s, 2.5s; }
.snowflake:nth-of-type(37) { left: 84%; animation-delay: 3s, 0s; }
.snowflake:nth-of-type(38) { left: 89%; animation-delay: 6s, 2s; }
.snowflake:nth-of-type(39) { left: 94%; animation-delay: 5s, 1s; }
.snowflake:nth-of-type(40) { left: 99%; animation-delay: 8s, 3s; }