html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
}
#contagem {
	position: absolute;
	top: 93%;
	text-align: center;
	font-family: verdana;
	font-size: 1.8em;
	color: #004;
	text-shadow: 0px 0px 15px #000;	
	width: 100%;
	left: 0;	
	right: 0;
}
#mensagem {
	position: absolute;
	top: 10%;
	text-align: center;
	font-family: verdana;
	font-size: 2.9em;
	color: #fff;
	width: 100%;
	text-shadow: 0px 0px 15px #000;	
	left: 0%;	
}
#fundo {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
#container{		
	width: 100%;
	height: 100%;		
	left: 0;
	top: 0;
	position: absolute;	
}

@-webkit-keyframes nieve{
	from {top: -10%;}
	to {top: 99%;}
}

@-webkit-keyframes copos{
	0%   { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
	100% { -webkit-transform: rotate(180deg) translate(20px, 115px);}
}
#snow div {
	position: absolute;
	top: -6%;
	-webkit-animation-name: nieve, copos;
	-webkit-animation-iteration-count: infinite; 
	-webkit-animation-direction: normal; 
	-webkit-animation-timing-function: ease-in;
}
.copos {
	color: #fff;
	font-size: 1em;
	position: absolute;	
}
.copos.f1 {
	left: 6%;
	-webkit-animation-duration: 5s;	
}
.copos.f2 {
	font-size: 1.8em;
	left: 15%;
	-webkit-animation-duration: 7s;	
}
.copos.f3 {
	left: 22%;
	-webkit-animation-duration: 8s;	
}
.copos.f4 {
	font-size: 1.5em;
	left: 35%;
	-webkit-animation-duration: 6s;	
}
.copos.f5 {
	font-size: 1.5em;
	left: 40%;
	-webkit-animation-duration: 4s;	
}
.copos.f6 {
	font-size: 1.5em;
	left: 44%;
	-webkit-animation-duration: 9s;	
}
.copos.f7 {
	font-size: 1.5em;
	left: 56%;
	-webkit-animation-duration: 6.5s;	
}
.copos.f8 {
	font-size: 1.5em;
	left: 66%;
	-webkit-animation-duration: 9.2s;	
}		
.copos.f9 {
	font-size: 1.5em;
	left: 72%;
	-webkit-animation-duration: 3.2s;	
}	
.copos.f10 {
	font-size: 1.5em;
	left: 85%;
	-webkit-animation-duration: 7.2s;	
}			
.copos.f11 {
	left: 92%;
	-webkit-animation-duration: 3s;	
}
.copos.f12 {
	font-size: 1.8em;
	left: 94%;
	-webkit-animation-duration: 8.s;	
}
.copos.f13 {
	left: 36%;
	-webkit-animation-duration: 5.3s;	
}
.copos.f14 {
	font-size: 1.5em;
	left: 44%;
	-webkit-animation-duration: 7.2s;	
}
.copos.f15 {
	font-size: 1.5em;
	left: 27%;
	-webkit-animation-duration: 6.6s;	
}
.copos.f16 {
	font-size: 1.5em;
	left: 45.8%;
	-webkit-animation-duration: 4.7s;	
}
.copos.f17 {
	font-size: 1.5em;
	left: 68%;
	-webkit-animation-duration: 6.9s;	
}
.copos.f18 {
	font-size: 1.5em;
	left: 75%;
	-webkit-animation-duration: 5.8s;	
}		
.copos.f19 {
	font-size: 1.5em;
	left: 13.5%;
	-webkit-animation-duration: 4.1s;	
}	
.copos.f20 {
	font-size: 1.5em;
	left: 3.5%;
	-webkit-animation-duration: 6.9s;	
}
.copos.f21 {
	left: 63.2%;
	-webkit-animation-duration: 8.2s;	
}
.copos.f22 {
	font-size: 1.8em;
	left: 23.9%;
	-webkit-animation-duration: 4.6.s;	
}
.copos.f23 {
	left: 33.4%;
	-webkit-animation-duration: 5.9s;	
}
.copos.f24 {
	font-size: 1.5em;
	left: 41.9%;
	-webkit-animation-duration: 9.2s;	
}
.copos.f25 {
	font-size: 1.5em;
	left: 29.5%;
	-webkit-animation-duration: 3.6s;	
}
.copos.f26 {
	font-size: 1.5em;
	left: 62.2%;
	-webkit-animation-duration: 4.1s;	
}
.copos.f27 {
	font-size: 1.5em;
	left: 79.3%;
	-webkit-animation-duration: 9.2s;	
}
.copos.f28 {
	font-size: 1.5em;
	left: 73.9%;
	-webkit-animation-duration: 5.5s;	
}		
.copos.f29 {
	font-size: 1.5em;
	left: 11.11%;
	-webkit-animation-duration: 7.1s;	
}	
.copos.f30 {
	font-size: 1.5em;
	left: 15.34%;
	-webkit-animation-duration: 4.9s;	
}
 @media screen and (orientation:portrait) { 
	.proporcional 
	{
		width:100%;
		background-size:contain;
		position:relative;
		padding-bottom:80%;
	}
	.proporcional span {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		display:block;
	}	
 }
 @media screen and (orientation:landscape) {
	.proporcional {
		 position: relative;
		 width: 100%;
		 height: 100%;
	}
	.proporcional span {
		display: block;
		width: 100%;
		height: 100%;
	}
 }