﻿.snow {
	position:relative;
    width: 800px;
    height: 600px;
    border: 1px solid grey;
	overflow:hidden;
	margin:20px auto;
	background-image:url(images/new_year_8.jpg) ;
	background-size:cover;
}
.snowl {
	height: 40px;
	width: 40px;
	position:absolute;
	top: -20%; 
	left: 80%;
	background-image: url(images/Snezhinka.png);
    background-size:40px 40px;	
    opacity:0.5;
    animation:fall 10s linear infinite;
    animation-duration: 5s;
    animation-delay: 0s;
}
#n2.snowl {
	height: 30px;
	width: 30px;
	top: -90%; 
	left: 10%;
    opacity:0.5;
	transform:rotate(60deg);
    background-size:30px 30px;
    animation-duration: 4s;
    animation-delay: 0s;
}
#n3.snowl {
	height: 40px;
	width: 40px;
	top: -70%; 
	left: 80%;
    opacity:0.6;
	transform:rotate(-60deg);
    background-size:40px 40px;
    animation-duration: 8s;
    animation-delay: 0.5s;
}
#n4.snowl {
	height: 50px;
	width: 50px;
	top: -50%; 
	left: 45%;
    opacity:0.5;
	transform:rotate(10deg);
    background-size:50px 50px;
    animation-duration: 7s;
    animation-delay: 0.7s;
}
#n5.snowl {
	height: 25px;
	width: 25px;
	top: -95%; 
	left: 70%;
    opacity:0.8;
	transform:rotate(-45deg);
    background-size:25px 25px;
    animation-duration: 6s;
    animation-delay: 0.4s;
}
#n6.snowl {
	height: 50px;
	width: 50px;
	top: -80%; 
	left: 5%;
    opacity:0.7;
    background-size:50px 50px;
	transform:rotate(20deg);
    animation-duration: 9s;
    animation-delay: 0.1s;
}
#n7.snowl {
	height: 40px;
	width: 40px;
	top: -115%; 
	left: 35%;
    opacity:0.8;
    background-size:40px 40px;
	transform:rotate(-20deg);
    animation-duration: 5.5s;
    animation-delay: 0.4s;
}
#n8.snowl {
	height: 30px;
	width: 30px;
	top: -80%; 
	left: 20%;
    opacity:0.6;
	transform:rotate(-30deg);
    background-size:30px 30px;
    animation-duration: 4.5s;
    animation-delay: 0.2s;
}
@keyframes fall {
    0% {
    }
	1%{
		margin-left:300px;
	}
	70%{
		margin-right:300px;
		transform:rotate(-180deg);
	}
    100% {
		top: 130%; 
    }	
}
.santa{
	position: absolute;
	z-index: 99999;
	top: 490px; 
	left: 1000px;
	width: 85px;
	height: 125px;
	opacity:1;
	background-image: url(images/santasprite.jpg);
	animation: play 0.9s steps(7) infinite,movement 15s linear infinite;
}
@keyframes play { 
      0% { background-position:    600px 0px; } 
    100% { background-position: -600 0; }
}
@keyframes movement {
    from {
	opacity:0;
	left:1000px;
    }
	1%{
		opacity:1;
		left:70%;
	}
	99.99% {
	opacity:1;
	left: 25%;
	}
    to {
	opacity:0;
	left:0px;
}
}
#dd{
  width:230px;
	margin:auto;
}

.w{
	color:rgb(0,0,0);
	font-family:Arial;
	font-size:24px;
	text-decoration:none;
	font-weight:normal;
	font-style:normal;
	float:left;
	animation-name:letter;
	animation-duration:2.4s;	
	animation-iteration-count:infinite;	
	animation-direction:normal;
}

#word2{
	animation-delay:0.75s;
		
}
#word3{
	animation-delay:0.9s;
		
}
#word4{
	animation-delay:1.05s;
		
}
#word5{
	animation-delay:1.2s;
		
}
#word6{
	animation-delay:1.35s;
	 margin:0 10px 0 0;
		
}
#word7{
	animation-delay:1.5s;
		
}
#word8{
	animation-delay:1.64s;
		
}
#word9{
	animation-delay:1.79s;
	 margin:0 10px 0 0;
		
}
#word10{
  animation-delay:1.94s;
		
}
#word11{
  animation-delay:2.09s;
  	
}
#word12{
  animation-delay:2.24s;
  	
}
#word13{
  animation-delay:2.39s;
    
}

@keyframes letter{
	0%{
		color:rgb(255, 0, 0);
	}

	100%{
		color:rgb(255, 255, 255);
	}
}

