@charset "UTF-8";
/* Screen CSS */

#flakes i {
	z-index: 100 !important;
	background-image: url('/wp-content/themes/houstonzoo/images/snowflake.png');
    background-size: cover;
}

	
	 /* default animation and transform */
	 #flakes i {
		display: inline-block;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		-webkit-transform-origin: left -20px;
		-webkit-animation-name: falling;
		-webkit-animation-duration: 3s;
		-webkit-animation-direction:normal;
		-webkit-animation-iteration-count: 20;
		-webkit-animation-timing-function: linear;
		-webkit-animation-delay: 2s;
		-webkit-animation-fill-mode: none;
		-webkit-animation-play-state:running;
		/* or */
		-moz-animation: falling 3s linear 2s 20;
	}
	
	/* animation used for ALL snowflakes */
	@-webkit-keyframes falling {
		0% { 
			-webkit-transform: 
					translate3d(0,0,0) 
					rotate(0deg) 
					scale(0.9,0.9);
		}
		100% { 
			-webkit-transform: 
					translate3d(30px,1000px,0) 
					rotate(360deg) 
					scale(1.1,1.1);
		}	
	}
	
	@-moz-keyframes falling {
		0% { 
			-moz-transform: 
					translate3d(0,0,0) 
					rotate(0deg) 
					scale(0.9,0.9);
		}
		100% { 
			-moz-transform: 
					translate(30px,1000px) 
					rotate(360deg) 
					scale(1.1,1.1);
		}	
	}
	
	/* different sizes, and default origins based on size */
	#flakes i:nth-of-type(4n) {
		height:30px;
		width:30px;
		-webkit-transform-origin: right -30px;
		-moz-transform-origin: right -30px;
	}
	#flakes i:nth-of-type(4n+1) {
		height:24px;
		width:24px;
		-webkit-transform-origin: left -30px;
		-moz-transform-origin: left -30px;
	}
	#flakes i:nth-of-type(4n+2){
		height:10px;
		width:10px;
		-webkit-transform-origin: -30px 0;
		-moz-transform-origin: -30px 0;
	}
	
	/* different speeds, with iteration counts to equal 3minutes approx. */
	#flakes i:nth-of-type(4n) {
		-webkit-animation-duration: 5.3s; 
		-webkit-animation-iteration-count: 12;
		-webkit-transform-origin: -10px -20px;
		-moz-animation-duration: 5.3s; 
		-moz-animation-iteration-count: 12;
		-moz-transform-origin: -10px -20px;
	}
	#flakes i:nth-of-type(4n+1){
		-webkit-animation-duration: 3.1s; 
		-webkit-animation-iteration-count: 20;
		-webkit-transform-origin: 10px -20px;
		-moz-animation-duration: 3.1s; 
		-moz-animation-iteration-count: 20;
		-moz-transform-origin: 10px -20px;
		}
	#flakes i:nth-of-type(4n+2) {
		-webkit-animation-duration: 1.7s;
		-webkit-animation-iteration-count: 35;
		-webkit-transform-origin: right -20px;
		-moz-animation-duration: 1.7s;
		-moz-animation-iteration-count: 35;
		-moz-transform-origin: right -20px;
	}
	
	/* different delays so they don't all start at the same time */
	#flakes i:nth-of-type(3n) {
		-webkit-animation-delay: 2.3s;
		-moz-animation-delay: 2.3s;
		}
	#flakes i:nth-of-type(3n+1) {
		-webkit-animation-delay: 1.5s;
		-moz-animation-delay: 1.5s;
		}
	#flakes i:nth-of-type(3n+2) {
		-webkit-animation-delay: 3.4s;
		-moz-animation-delay: 3.4s;
		}
	
	/* playing with timing functions to make it a teeny bit more random like */
	#flakes i:nth-of-type(5n)   {-webkit-animation-timing-function:ease-in-out;}
	#flakes i:nth-of-type(5n+1) {-webkit-animation-timing-function:ease-out;}
	#flakes i:nth-of-type(5n+2) {-webkit-animation-timing-function:ease;}
	#flakes i:nth-of-type(5n+3) {-webkit-animation-timing-function:ease-in;}
	#flakes i:nth-of-type(5n+4) {-webkit-animation-timing-function:linear;}
	#flakes i:nth-of-type(11n) {-webkit-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}
	
	#flakes i:nth-of-type(5n)   {-moz-animation-timing-function:ease-in-out;}
	#flakes i:nth-of-type(5n+1) {-moz-animation-timing-function:ease-out;}
	#flakes i:nth-of-type(5n+2) {-moz-animation-timing-function:ease;}
	#flakes i:nth-of-type(5n+3) {-moz-animation-timing-function:ease-in;}
	#flakes i:nth-of-type(5n+4) {-moz-animation-timing-function:linear;}
	#flakes i:nth-of-type(11n) {-moz-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}
	
	/* playing with opacity to make it a teeny bit more random like */
	#flakes i:nth-of-type(7n){opacity: 0.5}
	#flakes i:nth-of-type(7n+2) {opacity: 0.3}
	#flakes i:nth-of-type(7n+4) {opacity: 0.7}
	#flakes i:nth-of-type(7n+6){opacity: 0.6;
		-webkit-animation-timing-function:ease-in;
		-webkit-transform-origin: left 10px;
		-moz-animation-timing-function:ease-in;
		-moz-transform-origin: left 10px;}
	#flakes i:nth-of-type(7n+1){opacity: 0.8}
	
	

#flakes {position: relative; top: -30px; width:100%; text-align:center;}