* {
	margin: 0;
	padding: 0;
}

html, body {height: 100%}

/*Keyframes*/
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-o-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@keyframes blink {
  0% {
    height: 13px;
  }
  50% {
    height: 4px;
  } 
  100% {
    height: 13px;
  }  
}

@keyframes hand-up {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform:    rotate(0deg);
    -ms-transform:     rotate(0deg);
    -o-transform:      rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(25deg);
    -moz-transform:    rotate(25deg);
    -ms-transform:     rotate(25deg);
    -o-transform:      rotate(25deg);    
  } 
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform:    rotate(0deg);
    -ms-transform:     rotate(0deg);
    -o-transform:      rotate(0deg);
  }  
}


@keyframes balls {
  0% {
	background: -moz-radial-gradient(7px 10px, circle, red, #590900);
	background: -ms-radial-gradient(7px 10px, circle, red, #590900);
	background: -webkit-radial-gradient(7px 10px, circle, red, #590900);
  }
  50% {
	background: -moz-radial-gradient(7px 10px, circle, yellow, red);
	background: -ms-radial-gradient(7px 10px, circle, yellow, red);
	background: -webkit-radial-gradient(7px 10px, circle, yellow, red);
  } 
  100% {
	background: -moz-radial-gradient(7px 10px, circle, red, #590900);
	background: -ms-radial-gradient(7px 10px, circle, red, #590900);
	background: -webkit-radial-gradient(7px 10px, circle, red, #590900);
  }  
}

@keyframes show-balls {
    0% {
	width: 0;
    height: 0;
  }

    50% {
	width: 0;
    height: 0;
  }   

  100% {
	width: 30px;
    height: 30px;
  } 
  
}

@keyframes snowMan-move {
    0% {
	right: -95%;
  }

  100% {
    right: 8%;
  } 
  
}

@keyframes star {
    0% {
	opacity: 0;
  }
    25% {
	opacity: 0;
  }  

  100% {
    opacity: 1;
  } 
  
}

.wrap  {
	width: 80%;
	height: 550px;
	margin: 50px auto;
	position: relative;
    overflow: hidden;
	background: -webkit-linear-gradient(to bottom, #36ddf2 0%, #89ebf7 40%,  #d0f7fc 100%);
	background: -moz-linear-gradient(to bottom, #36ddf2 0%, #89ebf7 40%,  #d0f7fc 100%);
	background: -o-linear-gradient(to bottom, #36ddf2 0%, #89ebf7 40%,  #d0f7fc 100%);
	background: -ms-linear-gradient(to bottom, #36ddf2 0%, #89ebf7 40%,  #d0f7fc 100%);
	background: linear-gradient(to bottom, #36ddf2 0%, #89ebf7 40%,  #d0f7fc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#36ddf2', 
            endColorstr='#d0f7fc',GradientType=0);	
}
div#wrapper {
	background-image: url('../image/snowflake.png'), url('../image/snowflake3.png'), url('../image/snowflake2.png');
	height:100%;
	-webkit-animation: snow 20s linear infinite;
	-moz-animation: snow 20s linear infinite;
	-ms-animation: snow 20s linear infinite;
	-o-animation: snow 20s linear infinite;
	animation: snow 20s linear infinite;
}


.snowdrift {
	background-color: #fff;
	width: 100%;
	height: 50%;
	margin: auto;
	position: relative;
	bottom: -90%;
	border-radius: 80%;
	-moz-border-radius: 80%;
	-khtml-border-radius: 80%;
	-webkit-border-radius: 80%;	
}

.tree {
	height: 80px;
	width: 30px;
	margin-left: 50%;
	left: -15px;
	bottom: 10%;
	background-color: brown;
	position: absolute;
}

.starwrap {
	position: absolute;
	margin-left: 50%;
	left: -25px;
	top: 35px;
    animation-name: star;
    animation-duration: 15s;
    animation-timing-function: ease-in-out;
}

#star-five {
   margin: 25px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  25px solid transparent;
   border-bottom: 18px  solid red;
   border-left:   25px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
	-webkit-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-moz-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-o-transition: border-bottom-color 1s steps(8,end) 0.5s;
	transition: border-bottom-color 1s steps(8,end) 0.5s;   
}
#star-five:before {
   border-bottom: 20px solid red;
   border-left: 8px solid transparent;
   border-right: 8px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -11px;
   left: -16px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
	-webkit-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-moz-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-o-transition: border-bottom-color 1s steps(8,end) 0.5s;
	transition: border-bottom-color 1s steps(8,end) 0.5s;  
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 2px;
   left: -26px;
   width: 0px;
   height: 0px;
   border-right: 25px solid transparent;
   border-bottom: 18px solid red;
   border-left: 25px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
	-webkit-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-moz-transition: border-bottom-color 1s steps(8,end) 0.5s;
	-o-transition: border-bottom-color 1s steps(8,end) 0.5s;
	transition: border-bottom-color 1s steps(8,end) 0.5s;   
}

.firTree:hover  #star-five, 
.firTree:hover  #star-five:before, 
.firTree:hover  #star-five:after {
	border-bottom-color: yellow;
} 


.firTree:hover  .ball {
	background: -moz-radial-gradient(7px 10px, circle, yellow, red);
	background: -ms-radial-gradient(7px 10px, circle, yellow, red);
	background: -webkit-radial-gradient(7px 10px, circle, yellow, red);
	}

.triangle {
   width: 400px;
   height: 200px;
   position: relative;
   overflow: hidden;
	margin-left: 50%;
	left: -200px;  
	border-radius: 90%;
	-moz-border-radius: 90%;
	-khtml-border-radius: 90%;
	-webkit-border-radius: 90%;
	top: -20px;
}

.triangle:after {
   content: "";
   position: absolute;
   width: 200px;
   height: 200px;
   background: green;
   transform: rotate(45deg); 
   -moz-transform:    rotate(45deg);
   -webkit-transform: rotate(45deg);
   -ms-transform:     rotate(45deg);
   -o-transform:      rotate(45deg);
   bottom: -75px;
   left: 100px;
   box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}

#elka2 {
   width: 360px;
   height: 180px;
	top: -300px;
	left: -180px; 
}
#elka2:after {
   width: 180px;
   height: 180px;
   left: 90px;   
}

#elka3 {
   width: 280px;
   height: 140px;
	top: -540px;
	left: -140px; 
}
#elka3:after {
   width: 140px;
   height: 140px;
   left: 70px;   
}

#elka4 {
   width: 240px;
   height: 120px;
	top: -730px;
	left: -120px; 
}
#elka4:after {
   width: 120px;
   height: 120px;
   left: 60px;   
}

#elka5 {
   width: 200px;
   height: 100px;
	top: -885px;
	left: -100px; 
}
#elka5:after {
   width: 100px;
   height: 100px;
   left: 50px;   
}

.decor {
	position: relative;
	top: -1020px;
}

.ball {
	width: 30px;
	height: 30px;
	background-color: red;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-khtml-border-radius: 50%;
	-webkit-border-radius: 50%;	
	position: absolute;
	background: -moz-radial-gradient(7px 10px, circle, red, #590900);
	background: -ms-radial-gradient(7px 10px, circle, red, #590900);
	background: -webkit-radial-gradient(7px 10px, circle, red, #590900);
	margin-left: 50%;
	left: -25px;
	top: 140px;
    animation-name: balls, show-balls;
    animation-duration: 4s, 6s;
    animation-delay: 5.4s, 0;  
    animation-timing-function: ease, ease-in-out;
    animation-iteration-count: 30, 1;
}
#ball2 {
	top: 215px;
	left: 10px;
}

#ball3 {
	top: 275px;
	left: -55px;
}

#ball4 {
	top: 325px;
	left: 20px;
}

#ball5 {
	top: 375px;
	left: -65px;
}

.snowMan {
	position: absolute;
	width: 200px;
	height: 400px;
	top: 150px;	
	right: 8%;	
    animation-name: snowMan-move;
    animation-duration: 2s;
}

.snowMan1 {
	position: absolute;
	right: 15px;
	bottom: 0;
	height: 150px;
	width: 170px;
	overflow: hidden;
	}

.snowMan2 {
	position: absolute;
	right: 35px;
	bottom: 130px;
	height: 130px;
	width: 130px;
	overflow: hidden;	
}	

.snowMan3 {
	position: absolute;
	right: 45px;
	bottom: 220px;
	height: 110px;
	width: 110px;
	overflow: hidden;
}
	
.snowball {
	position: absolute;
	width:170px;
	height:150px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-khtml-border-radius: 50%;
	-webkit-border-radius: 50%;	
	bottom: 0px;
	box-shadow: inset 0 0 50px rgba(18,130,236,0.5);
	background-color: #fff;
	top: 15px;
}

.snowMan2 > .snowball {
	width: 130px;
	height: 110px;
	top: 30px;
}
	
.snowMan3 > .snowball {
	width: 110px;
	height: 100px;
	top: 25px;
}

.noseS {
   position: relative;
   top: 127px;
   left: 25px;
   width: 75px;
   overflow: hidden;
}

#nose {
   margin: 10px 0;
   position: relative;
   display: block;
   color: #ea8a10;
   width: 0px;
   height: 0px;
   border-right:  55px solid transparent;
   border-bottom: 20px  solid #ea8a10;
   border-left:   75px solid transparent;
   -moz-transform:    rotate(25deg);
   -webkit-transform: rotate(25deg);
   -ms-transform:     rotate(25deg);
   -o-transform:      rotate(25deg);
}

.eye2 {
	position: relative;
	top: 80px;	
	text-align: center;
}

.eye {
	display: inline-block;
	background-color:#000;
	width: 10px;
	height: 13px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-khtml-border-radius: 50%;
	-webkit-border-radius: 50%;	
 /*   animation-name: blink;
    animation-duration: 1.5s;
    animation-delay: 10s;
    animation-iteration-count: infinite;  
*/
}
#eyeR {
	margin-left: 15px;
    animation-name: blink;
    animation-duration: 4s;
    animation-delay: 2.2s;
    animation-iteration-count: 2;    
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;	  
}

.snowMan:hover #eyeR {
	height: 4px;
}

#hat {
    border-bottom: 60px solid red;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    width: 60px;
	position:relative;
	left: 40px;
	top: -20px;
}

.hand {
	left: -50px;
	top: 170px;
	position: absolute;
	-webkit-transform: scale(0.7);
    -moz-transform: scale(0.7);
    -o-transform: scale(0.7);
    transform: scale(0.7);
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;	
}

#handRight {
	right: -70px;
	-webkit-transform: scaleX(-0.7);
    -moz-transform: scaleX(-0.7);
    -o-transform: scaleX(-0.7);
    transform: scaleX(-0.7);
}

.snowMan:hover #handLeft  {
   -moz-transform:    rotate(25deg);
   -webkit-transform: rotate(25deg);
   -ms-transform:     rotate(25deg);
   -o-transform:      rotate(25deg);
	-webkit-transform-origin: right bottom;
	-moz-transform-origin: right bottom; 
   -ms-transform-origin: right bottom;
   -o-transform-origin: right bottom;
}

#handLeft {
    animation-name: hand-up;
    animation-duration: 3s;
    animation-delay: 2.2s;
    animation-iteration-count: 2;    
}

.newYear {
	position: absolute;
	top: 600px;
	width: 80%;
	left: 10%;
}

marquee {
	font-family: 'Lobster', serif;
	font-size: 1.1em;
	padding: 5px 0;
	color: #fff;
	background-color: #2a37dc;
}
marquee > span {
	font-style: normal;
    color: #fff; 
}

@media only all and (max-width: 420px) {
	.wrap  {
		width: 100%;     
      	margin: 0 auto 50px;
        margin-top:  -50px;
	}

	.newYear {
		width: 100%;
		left: 0;
	    top: 500px;      
	}	
	
	marquee {
		font-size: 1.2em;
	}
	
	.triangle {
		width: 320px;
		height: 160px;
		top: 20px;
		left: -160px; 
	}
	.triangle:after {
		width: 160px;
		height: 160px;
		left: 80px;     
	}
   
   #elka2 {
		width: 280px;
		height: 140px;
		top: -200px;
		left: -140px; 
	}
	#elka2:after {
		width: 140px;
		height: 140px;
		left: 70px;   
	}
	#elka3 {
		width: 240px;
		height: 120px;
		top: -390px;
		left: -120px; 
	}
	#elka3:after {
		width: 120px;
		height: 120px;
		left: 60px;   
	}
	#elka4 {
		width: 212px;
		height: 106px;
		top: -552px;
		left: -106px; 
	}
	#elka4:after {
		width: 106px;
		height: 106px;
		left: 53px;   
	}	
	#elka5 {
		width: 180px;
		height: 90px;
		top: -690px;
		left: -90px; 
	}
	#elka5:after {
		width: 90px;
		height: 90px;
		left: 45px;   
	}	
	.starwrap {
		top: 115px;
	}
	
	.decor {
		top: -820px;
	}
	.ball{
		width: 20px;
		height: 20px;
		background: -moz-radial-gradient(4px 7px, circle, red, #590900);
		background: -ms-radial-gradient(4px 7px, circle, red, #590900);
		background: -webkit-radial-gradient(4px 7px, circle, red, #590900);
	}
	*#ball5 {
		top: 355px;
	}
	
.firTree:hover  .ball {
	background: -moz-radial-gradient(4px 7px, circle, yellow, red);
	background: -ms-radial-gradient(4px 7px, circle, yellow, red);
	background: -webkit-radial-gradient(4px 7px, circle, yellow, red);
	}	

	.snowMan {
		width: 150px;	
		right: 3%;	
	}	

	.snowMan1 {
		left: 0px;
		bottom: 0px;
		height: 130px;
		width: 150px;
	}

	.snowMan2 {
		right: 20px;
		bottom: 110px;
		height: 110px;
		width: 110px;
	}	

	.snowMan3 {
		right: 30px;
		bottom: 187px;
		height: 90px;
		width: 90px;
	}
	
	.snowball {
		width:150px;
		height:130px;
	}

	.snowMan2 > .snowball {
		width: 110px;
		height: 90px;
		top: 25px;
	}
	
	.snowMan3 > .snowball {
		width: 90px;
		height: 80px;
		top: 17px;
	}	
	.eye2 {
		top: 120px;	
	}
	.noseS {
		top: 167px;
		left: 7px;
		width: 67px;
	}
	
	.hand {
		left: -50px;
		top: 190px;
	}
	#hat {
    border-bottom: 50px solid red;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    width: 50px;
	left: 25px;
	top: 40px;
}
	
}