#obdobi-botom{
	width: 100%;
	height: 181px;
	position: fixed;
	bottom: 0px;
	left: 0px;
	margin: 0;
	padding: 0;
	z-index: 80;
background: url('obr/leto_stred.png') left bottom repeat-x, url('obr/leto_levo.png') left bottom no-repeat, url('obr/leto_pravo.png') right bottom no-repeat;
z-index: -1;
}

#patka{
background: url('obr/leto_stred.png') left bottom repeat-x}

#flakes{
width: 100%;
height: 100%;
position: fixed;
right: 0px;
top: 0px;
display: block;
overflow: hidden;
z-index: -1;
}


#flakes i{
	 display: inline-block;
  height: 30px;
  width: 30px;
background-size: contain;
		-webkit-transform-origin: left -20px;
		-webkit-animation-name: falling;
		-webkit-animation-duration: 16s;
		-webkit-animation-direction:normal;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-timing-function: linear;
		-webkit-animation-delay: 2s;
		-webkit-animation-fill-mode: none;
		-webkit-animation-play-state:running;
		/* or */
		-moz-animation: falling 12s linear 2s infininte;
		
		transform-origin: left -20px;
		animation-name: falling;
		animation-duration: 12s;
		animation-direction: normal;
		animation-iteration-count: infinite;
		animation-timing-function: linear;
		animation-delay: 2s;
		animation-fill-mode: none;
		animation-play-state:running;

		-o-transform-origin: left -20px;
		-o-animation-name: falling;
		-o-animation-duration: 16s;
		-o-animation-direction:normal;
		-o-animation-iteration-count:infinite;
		-o-animation-timing-function: linear;
		-o-animation-delay: 2s;
		-o-animation-fill-mode: none;
		-o-animation-play-state:running;

		-ms-transform-origin: left -20px;
		-ms-animation-name: falling;
		-ms-animation-duration: 16s;
		-ms-animation-direction:normal;
		-ms-animation-iteration-count:infinite;
		-ms-animation-timing-function: linear;
		-ms-animation-delay: 2s;
		-ms-animation-fill-mode: none;
		-ms-animation-play-state:running;
						
		position: relative;
		top: -200px;
		}

@keyframes falling {
		0% { 
			transform: 
					translate(0,0,) 
					rotate(0deg) 
					scale(0.9,0.9);
			-webkit-transform: 
					translate3d(0,0,0) 
					rotate(0deg) 
					scale(0.9,0.9);
			-ms-transform: 
					translate3d(0,0,0) 
					rotate(0deg) 
					scale(0.9,0.9);
		}
		100% { 
		transform: 
					translate(30px,1000px) 
					rotate(360deg) 
					scale(1.1,1.1);
		-webkit-transform: 
					translate3d(30px,1000px,0) 
					rotate(360deg) 
					scale(1.1,1.1);
		-ms-transform: 
					translate3d(30px,1000px,0) 
					rotate(360deg) 
					scale(1.1,1.1);
		}	
	}
	
@-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);
		}	
	}
	
	#flakes i:nth-of-type(3n){
	background-image: url('obr/kvet_1.png');
	}
	#flakes i:nth-of-type(3n+1){
	background-image: url('obr/kvet_2.png');
	}
	#flakes i:nth-of-type(3n+2){
	background-image: url('obr/kvet_3.png');
	}

	
	/* 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;
		transform-origin: right -30px;
		-ms-transform-origin: right -30px;
		-o-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;
		transform-origin: left -30px;
		-ms-transform-origin: left -30px;
		-o-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;
		-ms-transform-origin: -30px 0;
		-o-transform-origin: -30px 0;
		transform-origin: -30px 0;
	}
	
	/* different speeds, with iteration counts to equal 3minutes approx. */
	#flakes i:nth-of-type(4n) {
		-webkit-animation-duration: 12s; 
		-webkit-animation-iteration-count: 12;
		-webkit-transform-origin: -10px -20px;
		-moz-animation-duration: 12s; 
		-moz-animation-iteration-count: 12;
		-moz-transform-origin: -10px -20px;
		animation-duration: 12s; 
		animation-iteration-count: 12;
		transform-origin: -10px -20px;
		-o-animation-duration: 12s; 
		-o-animation-iteration-count: 12;
		-o-transform-origin: -10px -20px;
		-moz-animation-duration: 12s; 
		-moz-animation-iteration-count: 12;
		-moz-transform-origin: -10px -20px;
		-ms-animation-duration: 12s; 
		-ms-animation-iteration-count: 12;
		-ms-transform-origin: -10px -20px;
	}
	#flakes i:nth-of-type(4n+1){
		-webkit-animation-duration: 10s; 
		-webkit-animation-iteration-count: 20;
		-webkit-transform-origin: 10px -20px;
		-moz-animation-duration: 10s; 
		-moz-animation-iteration-count: 20;
		-moz-transform-origin: 10px -20px;
		animation-duration: 10s; 
		animation-iteration-count: 20;
		transform-origin: 10px -20px;
		-ms-animation-duration: 10s; 
		-ms-animation-iteration-count: 20;
		-ms-transform-origin: 10px -20px;
		-o-animation-duration: 10s; 
		-o-animation-iteration-count: 20;
		-o-transform-origin: 10px -20px;
		}
	#flakes i:nth-of-type(4n+2) {
		-webkit-animation-duration: 8s;
		-webkit-animation-iteration-count: 35;
		-webkit-transform-origin: right -20px;
		-moz-animation-duration: 8s;
		-moz-animation-iteration-count: 35;
		-moz-transform-origin: right -20px;
		-ms-animation-duration: 8s;
		-ms-animation-iteration-count: 35;
		-ms-transform-origin: right -20px;
		-o-animation-duration: 8s;
		-o-animation-iteration-count: 35;
		-o-transform-origin: right -20px;
		animation-duration: 8s;
		animation-iteration-count: 35;
		transform-origin: right -20px;
	}
#flakes i:nth-of-type(3n) {
		-webkit-animation-delay: 2.3s;
		-moz-animation-delay: 2.3s;
		-ms-animation-delay: 2.3s;
		-o-animation-delay: 2.3s;
		animation-delay: 2.3s;
		}
	#flakes i:nth-of-type(3n+1) {
		-webkit-animation-delay: 1.5s;
		-moz-animation-delay: 1.5s;
		-ms-animation-delay: 1.5s;
		-o-animation-delay: 1.5s;
		animation-delay: 1.5s;
		}
	#flakes i:nth-of-type(3n+2) {
		-webkit-animation-delay: 3.4s;
		-moz-animation-delay: 3.4s;
		-ms-animation-delay: 3.4s;
		-o-animation-delay: 3.4s;
		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);}
	
	#flakes i:nth-of-type(5n)   {-ms-animation-timing-function:ease-in-out;}
	#flakes i:nth-of-type(5n+1) {-ms-animation-timing-function:ease-out;}
	#flakes i:nth-of-type(5n+2) {-ms-animation-timing-function:ease;}
	#flakes i:nth-of-type(5n+3) {-ms-animation-timing-function:ease-in;}
	#flakes i:nth-of-type(5n+4) {-ms-animation-timing-function:linear;}
	#flakes i:nth-of-type(11n) {-ms-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}
	
	#flakes i:nth-of-type(5n)   {-o-animation-timing-function:ease-in-out;}
	#flakes i:nth-of-type(5n+1) {-o-animation-timing-function:ease-out;}
	#flakes i:nth-of-type(5n+2) {-o-animation-timing-function:ease;}
	#flakes i:nth-of-type(5n+3) {-o-animation-timing-function:ease-in;}
	#flakes i:nth-of-type(5n+4) {-o-animation-timing-function:linear;}
	#flakes i:nth-of-type(11n) {-o-animation-timing-function:cubic-bezier(0.2, 0.3, 0.8, 0.9);}
	
	#flakes i:nth-of-type(5n)   {animation-timing-function:ease-in-out;}
	#flakes i:nth-of-type(5n+1) {animation-timing-function:ease-out;}
	#flakes i:nth-of-type(5n+2) {animation-timing-function:ease;}
	#flakes i:nth-of-type(5n+3) {animation-timing-function:ease-in;}
	#flakes i:nth-of-type(5n+4) {animation-timing-function:linear;}
	#flakes i:nth-of-type(11n) {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;
		-ms-animation-timing-function:ease-in;
		-ms-transform-origin: left 10px;
		-o-animation-timing-function:ease-in;
		-o-transform-origin: left 10px;
		animation-timing-function:ease-in;
		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}