.sparks {
	position: absolute;
	width: 100%;
	z-index: -1;
	right:20%;
}

.sparks>div {
	position: absolute
}

.sparks .spark_1 {
	background: url(assets/spark_1.png) no-repeat;
	width: 764px;
	height: 313px;
	right: 0;
	bottom: -320px;
	-webkit-transform: scale(.6);
	transform: scale(.6);
	-webkit-animation: spark-1 4s linear infinite;
	animation: spark-1 4s linear infinite;
	-webkit-animation-delay: 1s;
	animation-delay: 1s
}

.sparks .spark_2 {
	background: url(assets/spark_2.png) no-repeat;
	width: 179px;
	height: 335px;
	right: 230px;
	bottom: -320px;
	-webkit-transform: scale(.6);
	transform: scale(.6);
	-webkit-animation: spark-1 4s linear infinite;
	animation: spark-1 4s linear infinite;
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.sparks .spark_3 {
	background: url(assets/spark_3.png) no-repeat;
	width: 128px;
	height: 165px;
	right: 280px;
	bottom: -140px;
	-webkit-transform: scale(.6);
	transform: scale(.6);
	-webkit-animation: spark-3 4s linear infinite;
	animation: spark-3 4s linear infinite;
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.sparks .spark-big {
	background: url(assets/spark_4.png) no-repeat;
	width: 794px;
	height: 176px;
	right: 0;
	bottom: -180px;
	-webkit-transform: scale(.6);
	transform: scale(.6);
	-webkit-animation: spark-5 4s linear infinite;
	animation: spark-5 4s linear infinite
}

.sparks .spark_5 {
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
	right: 40px
}

.sparks_2 {
	margin-left: -200px;
	margin-top: -100px
}

.sparks_2 .spark_1 {
	background: url(assets/spark_1.png) no-repeat;
	-webkit-animation-delay: 2s;
	animation-delay: 2s
}

.sparks_2 .spark_2 {
	background: url(assets/spark_2.png) no-repeat;
	-webkit-animation-delay: 3s;
	animation-delay: 3s
}

.sparks_2 .spark_3 {
	background: url(assets/spark_3.png) no-repeat;
	-webkit-animation-delay: 3s;
	animation-delay: 3s
}

.sparks_2 .spark-big {
	background: url(assets/spark_4.png) no-repeat
}

.sparks_2 .spark_5 {
	-webkit-animation-delay: 3s;
	animation-delay: 3s
}

@-webkit-keyframes spark-1 {
	0% {
		bottom: -320px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -240px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -160px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: -80px;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@keyframes spark-1 {
	0% {
		bottom: -320px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -240px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -160px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: -80px;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 0;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@-webkit-keyframes spark-3 {
	0% {
		bottom: -140px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -80px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -20px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: 40px;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 100px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@keyframes spark-3 {
	0% {
		bottom: -140px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -80px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -20px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: 40px;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 100px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@-webkit-keyframes spark-5 {
	0% {
		bottom: -180px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -120px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -60px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: 0;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 60px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}

@keyframes spark-5 {
	0% {
		bottom: -180px;
		-webkit-transform: scale(.6);
		transform: scale(.6);
		opacity: 0
	}

	25% {
		bottom: -120px;
		-webkit-transform: scale(.7);
		transform: scale(.7);
		opacity: 1
	}

	50% {
		bottom: -60px;
		-webkit-transform: scale(.8);
		transform: scale(.8);
		opacity: 1
	}

	75% {
		bottom: 0;
		-webkit-transform: scale(.9);
		transform: scale(.9);
		opacity: .5
	}

	100% {
		bottom: 60px;
		-webkit-transform: scale(1);
		transform: scale(1);
		opacity: 0
	}
}
/* =====================================
   EFFECT NEBLINA 
   ===================================== */
  
.smoke {
	position: absolute;
	left: 0;
	right: 0;
	top: 510px;
	height: 484px;
	width: 100%;
	z-index:0;
	background-image: url(assets/smoke.png);
	background-position: left top;
	background-repeat: repeat-x;
	-webkit-animation: smoke 20s linear infinite;
	animation: smoke 40s linear infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards
}

@-webkit-keyframes smoke {
	0% {
		background-position: left -1920px top
	}

	100% {
		background-position: left 1920px top
	}
}

@keyframes smoke {
	0% {
		background-position: left -1920px top
	}

	100% {
		background-position: left 1920px top
	}
}