.snow_gif {

  background-image: url('../images/content/xmas_new_year/snow.gif');
  height: 100%;
  width: 100%;

}

.stars_gif {

  background-image: url('../images/gifs/stars.gif');
  height: 100%;
  width: 100%;

}

.waves_gif {

  background-image: url('../images/gifs/waves.gif');
  height: 100%;
  width: 100%;

}

.fireworks_gif {

  background-image: url('../images/gifs/fireworks.gif');
  background-size: cover;
  height: 100%;
  width: 100%;

}

.snow, .snow:before, .snow:after {
  position: absolute;
  top: -600px;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: radial-gradient(4px 4px at 359px 266px, white 50%, transparent), radial-gradient(5px 5px at 399px 384px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(3px 3px at 517px 389px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(4px 4px at 47px 51px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(3px 3px at 131px 597px, white 50%, transparent), radial-gradient(4px 4px at 179px 115px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(3px 3px at 375px 492px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(3px 3px at 519px 77px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(6px 6px at 371px 509px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(5px 5px at 382px 27px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 67px 137px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(4px 4px at 280px 66px, white 50%, transparent), radial-gradient(6px 6px at 92px 15px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(4px 4px at 355px 563px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(3px 3px at 476px 51px, white 50%, transparent), radial-gradient(5px 5px at 182px 95px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(3px 3px at 119px 414px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(6px 6px at 28px 159px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 358px 542px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(6px 6px at 470px 117px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 48px 516px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(4px 4px at 183px 131px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(3px 3px at 344px 30px, white 50%, transparent), radial-gradient(4px 4px at 314px 412px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(6px 6px at 351px 406px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(5px 5px at 7px 451px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(6px 6px at 271px 491px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(6px 6px at 335px 541px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(3px 3px at 379px 190px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(6px 6px at 313px 425px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(5px 5px at 591px 380px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(5px 5px at 300px 478px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 338px 240px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(5px 5px at 298px 153px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(4px 4px at 42px 309px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(3px 3px at 483px 129px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(4px 4px at 350px 95px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(5px 5px at 396px 461px, white 50%, transparent), radial-gradient(6px 6px at 41px 209px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(3px 3px at 265px 74px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(5px 5px at 316px 119px, white 50%, transparent), radial-gradient(4px 4px at 394px 123px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 89px 575px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(5px 5px at 87px 212px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(6px 6px at 125px 128px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(5px 5px at 127px 247px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(6px 6px at 211px 106px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(6px 6px at 129px 42px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(3px 3px at 178px 158px, white 50%, transparent), radial-gradient(3px 3px at 354px 261px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(4px 4px at 12px 304px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(5px 5px at 375px 407px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(6px 6px at 557px 141px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(3px 3px at 433px 57px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(3px 3px at 199px 13px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(6px 6px at 311px 129px, white 50%, transparent), radial-gradient(5px 5px at 226px 528px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(6px 6px at 89px 342px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(3px 3px at 61px 563px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(3px 3px at 437px 372px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(3px 3px at 277px 98px, white 50%, transparent), radial-gradient(4px 4px at 88px 122px, rgba(255, 255, 255, 0.7) 50%, transparent), radial-gradient(5px 5px at 501px 252px, rgba(255, 255, 255, 0.6) 50%, transparent), radial-gradient(6px 6px at 512px 316px, white 50%, transparent), radial-gradient(5px 5px at 45px 595px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(3px 3px at 325px 141px, rgba(255, 255, 255, 0.9) 50%, transparent), radial-gradient(4px 4px at 577px 389px, white 50%, transparent), radial-gradient(3px 3px at 250px 295px, rgba(255, 255, 255, 0.8) 50%, transparent), radial-gradient(4px 4px at 126px 224px, white 50%, transparent), radial-gradient(3px 3px at 152px 140px, rgba(255, 255, 255, 0.9) 50%, transparent);
  background-size: 600px 600px;
  animation: snow 3s linear infinite;
  content: "";
}

.snow:after {
  margin-left: -200px;
  opacity: .4;
  animation-duration: 6s;
  animation-direction: reverse;
  filter: blur(3px);
}

.snow:before {
  animation-duration: 9s;
  animation-direction: reverse;
  margin-left: -300px;
  opacity: .65;
  filter: blur(1.5px);
}

@keyframes snow {
  to {
    transform: translateY(600px);
  }
}