.xt-snow {
  position: absolute;
  z-index: 70;
  left: 20px;
  width: 5px;
  bottom: 0px;
  height: 5px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 2s linear 0.52s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}

@keyframes drop {
  0% {
    transform: translate3d(40px, -650px, 0) scaleX(1) scaleY(1) rotate(15deg);
  }
  85% {
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(15deg);
  }
  100% {
    transform: translate3d(0, 0, 0) scaleX(3) scaleY(0) rotate(0deg);
  }
}

div[class^='xt-bigsnow-']::before,
div[class^='xt-mediumsnow-']::before,
div[class^='xt-smallsnow-']::before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}

[class^='xt-bigsnow-']::after,
[class^='xt-mediumsnow-']::after,
[class^='xt-smallsnow-']::after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}

.xt-mediumsnow-1 {
  left: 20px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 1.84s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-1:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-1:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-1 {
  left: 20px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2s linear 1.4s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-1:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-1:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-2 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 60px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.6s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-2:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-2:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-2 {
  left: 60px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 0.12s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-2:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-2:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-2 {
  left: 60px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 0.28s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-2:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-2:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-3 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 100px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.72s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-3:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-3:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-3 {
  left: 100px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 1.8s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-3:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-3:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-3 {
  left: 100px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 1.2s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-3:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-3:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-4 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 140px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.16s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-4:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-4:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-4 {
  left: 140px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.4s linear 1.84s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-4:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-4:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-4 {
  left: 140px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 0.72s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-4:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-4:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-5 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 180px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.56s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-5:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-5:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-5 {
  left: 180px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 0.72s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-5:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-5:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-5 {
  left: 180px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2s linear 1.2s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-5:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-5:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-6 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 220px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.84s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-6:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-6:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-6 {
  left: 220px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 0.08s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-6:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-6:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-6 {
  left: 220px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 1.72s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-6:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-6:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-7 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 260px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.95s linear 1.76s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-7:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-7:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-7 {
  left: 260px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.4s linear 0.88s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-7:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-7:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-7 {
  left: 260px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 0.8s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-7:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-7:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-8 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 300px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 1.36s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-8:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-8:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-8 {
  left: 300px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 0.56s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-8:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-8:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-8 {
  left: 300px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2.1s linear 1.16s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-8:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-8:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-9 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 340px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.85s linear 0.36s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-9:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-9:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-9 {
  left: 340px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 0.16s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-9:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-9:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-9 {
  left: 340px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2s linear 0.28s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-9:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-9:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}

.xt-bigsnow-10 {
  position: absolute;
  z-index: 20;
  bottom: 0px;
  left: 380px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fffafa;
  animation: drop 0.95s linear 0.96s infinite;
  animation-fill-mode: both;
  transform-origin: 50% 100%;
}
.xt-bigsnow-10:before {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 0px;
  width: 5px;
  height: 5px;
  background-color: #fffafa;
  border-radius: 3px;
}
.xt-bigsnow-10:after {
  position: absolute;
  content: '';
  display: block;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 10px;
  background-color: #fffafa;
  border-radius: 50%;
}

.xt-mediumsnow-10 {
  left: 380px;
  opacity: 0.6;
  width: 6px;
  height: 6px;
  animation: drop 1.5s linear 1.36s infinite;
  animation-fill-mode: both;
}
.xt-mediumsnow-10:before {
  top: -2px;
  left: 1px;
  width: 4px;
  height: 4px;
}
.xt-mediumsnow-10:after {
  top: -4px;
  left: 2px;
  width: 2px;
  height: 6px;
}

.xt-smallsnow-10 {
  left: 380px;
  opacity: 0.3;
  width: 4px;
  height: 4px;
  animation: drop 2s linear 1.36s infinite;
  animation-fill-mode: both;
}
.xt-smallsnow-10:before {
  top: -2px;
  left: 1px;
  width: 2px;
  height: 2px;
}
.xt-smallsnow-10:after {
  top: -3px;
  left: 1px;
  width: 2px;
  height: 4px;
}