@keyframes flakesfly
{
  from { transform: translate(-50%, 0vh) scale(1) rotate(0deg); opacity: 1 }
  to { transform: translate(-50%, 60vh) scale(0) rotate(360deg); opacity: 0 }
}

@keyframes flakesfly_reverse
{
  from { transform: translate(-50%, 0vh) scale(1) rotate(0deg); opacity: 1 }
  to { transform: translate(-50%, 60vh) scale(0) rotate(-360deg); opacity: 0 }
}


.snow {
	position: fixed;
	z-index: 500;
	pointer-events: none;
	left: 0px;
	top: -50px;
	width: 100vw;
}

.snowflake {
	position: absolute;
	width: 0px;
	height: 0px;
}

.snowflake::before {
	content: '';
	width: 30px;
	height: 30px;
	background-size: auto 100%;
	background-position: center;
	background-repeat: no-repeat;
	animation-duration: inherit;
	position: absolute;
}

.snowflake_1::before {
	background-image: url(../img/1.png);
  animation: flakesfly 5s linear infinite;
}

.snowflake_2::before {
	background-image: url(../img/2.png);
  animation: flakesfly_reverse 5s linear infinite;
}

.snowflake_3::before {
	background-image: url(../img/3.png);
  animation: flakesfly 5s linear infinite;
}

.snowflake_4::before {
	background-image: url(../img/4.png);
  animation: flakesfly_reverse 5s linear infinite;
}


.blur .snow
{
  filter: blur(3px);
}