#leaves {

	overflow: hidden;
  z-index: 8;
  position: absolute;
  width:  100%;
  height: 100%;

  top: 0%;
}

.leaf{
	position: relative;

	animation-name: upper_flight;
	animation-iteration-count: infinite;
}

#leaf_1, #leaf_2, #leaf_8, #leaf_10{
animation-name: upper_flight;
width:  20px;
height: 20px;
}

#leaf_3, #leaf_4, #leaf_7{
animation-name: medium_flight;
width:  15px;
height: 15px;
}

#leaf_5, #leaf_6, #leaf_9, #leaf_11{
animation-name: lower_flight;
width:  30px;
height: 30px;
}

#leaf_1{
	animation-duration: 10s;

   background-image: url("img/leaf_1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#leaf_2{
	animation-duration: 7s;
	background-image: url("img/leaf_2.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;	
}

#leaf_3{
	animation-duration: 9s;
	background-image: url("img/leaf_3.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;	
}

#leaf_4{
	animation-duration: 12s;
	background-image: url("img/leaf_4.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#leaf_5{
	animation-duration: 7s;
	background-image: url("img/leaf_1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#leaf_6{
	animation-duration: 8s;
	background-image: url("img/leaf_2.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#leaf_7{
	animation-duration: 11s;
	background-image: url("img/leaf_3.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

#leaf_8{
	animation-duration: 20s;
	background-image: url("img/leaf_4.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
#leaf_9{
	animation-duration: 25s;
	background-image: url("img/leaf_1.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
#leaf_10{
	animation-duration: 24s;
	background-image: url("img/leaf_2.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}
#leaf_11{
	animation-duration: 17s;
	background-image: url("img/leaf_3.png");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}


@keyframes upper_flight{

	0%{top: 5% ; left: -15%;   transform: rotate3d(0, 0, 0,   0deg);}
	50%{top: 15%;              transform: rotate3d(1, 1, 0, -70deg);}
	100%{top: 30%; left: 110%; transform: rotate3d(1, 1, 0,  60deg);}
}

@keyframes medium_flight{

	0%{top: 5% ; left: -15%;  transform: rotate3d(0, 0, 0, 0deg);}
	50%{top: 45%;             transform: rotate3d(1, 0, 1, 120deg);}
	100%{top: 20%; left: 110%;transform: rotate3d(1, 0, 1, -60deg);}
}

@keyframes lower_flight{

	0%{top: 55% ; left: -15%; transform: rotate3d(0, 0, 0,   0deg);}
	50%{top: 60%;             transform: rotate3d(0, 1, 1, -30deg);}
	100%{top: 65%; left: 110%;transform: rotate3d(0, 1, 1,  60deg);}
}