.header-bg {
  width: 100%;
  height: 1000px;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  pointer-events: none;
}

.header-bg__leaf {
  width: 100%;
  height: 955px;
  background: url("../images/bg/leaf.png") top center no-repeat;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 4;
}

.header-bg__navigation {
  top: 24px;
  height: 74px;
  border-radius: 10px;
  background: url("../images/bg/nav_bg.png") bottom center no-repeat;
  z-index: 2;
}

@media (max-width: 1240px) {
  .header-bg__navigation {
    z-index: 3;
    top: 14px;
  }
}

@media (max-width: 480px) {
  .header-bg__navigation {
    display: none;
  }
}

.header-bg__navigation:before {
  content: '';
  width: calc( 100% - 20px);
  height: 12px;
  position: absolute;
  left: 10px;
  top: -12px;
  background: url("../images/bg/nav_bg.png") top center no-repeat;
}

.header-bg__character {
  position: absolute;
  z-index: 1;
}

@media (max-width: 1240px) {
  .header-bg__character.middle {
    z-index: 2;
    left: calc( 88% - 230px + 150px);
  }
}

@media (max-width: 860px) {
  .header-bg__character.middle {
    left: calc( 88% - 230px);
  }
}

.header-bg__character.left {
  width: 865px;
  height: 754px;
  top: 133px;
  left: calc( 88% - 924px);
  background: url("../images/bg/char_kirix.png") top center no-repeat;
}

@media (max-width: 1240px) {
  .header-bg__character.left {
    left: calc( 88% - 924px + 150px);
  }
}

@media (max-width: 860px) {
  .header-bg__character.left {
    left: calc( 88% - 954px);
  }
}

.header-bg__character.right {
  width: 606px;
  height: 716px;
  top: 6px;
  left: calc( 88% + 50px);
  background: url("../images/bg/char_kananx.png") top center no-repeat;
}

@media (max-width: 1240px) {
  .header-bg__character.right {
    left: calc( 88% + 50px + 50px);
  }
}

@media (max-width: 860px) {
  .header-bg__character.right {
    left: calc( 88% + 50px - 70px);
  }
}

.header-bg__smoke {
  position: absolute;
}

@media (max-width: 1024px) {
  .header-bg__smoke {
    display: none;
  }
}

.header-bg__smoke.smoke_1 {
  background: url("../images/bg/header_anim/smoke_1.png");
  background-position: 0px 88%;
  width: 100%;
  height: 671px;
  top: -300px;
  -webkit-animation: smoke-1 14s linear infinite;
  animation: smoke-1 14s linear infinite;
  opacity: 1;
}

@-webkit-keyframes smoke-1 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 1166px 88%;
  }
}

@keyframes smoke-1 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 1166px 88%;
  }
}

.header-bg__smoke.smoke_2 {
  background: url("../images/bg/header_anim/smoke_2.png");
  background-position: 0px 88%;
  width: 100%;
  height: 558px;
  left: 0px;
  top: -300px;
  -webkit-animation: smoke-2 10s linear infinite;
  animation: smoke-2 10s linear infinite;
  opacity: 1;
}

@-webkit-keyframes smoke-2 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 914px 88%;
  }
}

@keyframes smoke-2 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 914px 88%;
  }
}

.header-bg__smoke.smoke_3 {
  background: url("../images/bg/header_anim/smoke_1.png");
  background-position: 0px 88%;
  width: 100%;
  height: 671px;
  bottom: 100px;
  -webkit-animation: smoke-3 18s linear infinite;
  animation: smoke-3 18s linear infinite;
  opacity: 1;
  z-index: 1;
}

@-webkit-keyframes smoke-3 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 1166px 88%;
  }
}

@keyframes smoke-3 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 1166px 88%;
  }
}

.header-bg__smoke.smoke_4 {
  background: url("../images/bg/header_anim/smoke_2.png");
  background-position: 0px 88%;
  width: 100%;
  height: 558px;
  left: 0px;
  top: 300px;
  -webkit-animation: smoke-4 14s linear infinite;
  animation: smoke-4 14s linear infinite;
  opacity: 1;
  z-index: 1;
}

@-webkit-keyframes smoke-4 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 914px 88%;
  }
}

@keyframes smoke-4 {
  from {
    background-position: 0px 88%;
  }
  to {
    background-position: 914px 88%;
  }
}

.header-bg__sparks.right {
  top: 0px;
  right: -100px;
  -webkit-transform: rotate(135deg) scale(-1.8, -1.8);
  -ms-transform: rotate(135deg) scale(-1.8, -1.8);
  transform: rotate(135deg) scale(-1.8, -1.8);
  opacity: 0.5;
}

@media (max-width: 1024px) {
  .header-bg__sparks.right {
    display: none;
  }
}

.header-bg__sparks.left {
  top: 0px;
  left: -100px;
  -webkit-transform: rotate(-135deg) scale(1.8, -1.8);
  -ms-transform: rotate(-135deg) scale(1.8, -1.8);
  transform: rotate(-135deg) scale(1.8, -1.8);
  opacity: 0.5;
}

@media (max-width: 1024px) {
  .header-bg__sparks.left {
    display: none;
  }
}

.header-bg__sparks {
  position: absolute;
  z-index: 6;
}

.header-bg__sparks div {
  position: absolute;
}

.header-bg__sparks-spark-1 {
  background: url("../images/bg/header_anim/spark_1.png") no-repeat;
  width: 764px;
  height: 313px;
  right: 0;
  bottom: -120px;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: spark-1 4s linear infinite;
  animation: spark-1 4s linear infinite;
}

@-webkit-keyframes spark-1 {
  0% {
    bottom: -320px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -240px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -160px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: -80px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes spark-1 {
  0% {
    bottom: -320px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -240px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -160px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: -80px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 0;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.header-bg__sparks-spark-2 {
  background: url("../images/bg/header_anim/spark_2.png") no-repeat;
  width: 149px;
  height: 335px;
  right: 230px;
  bottom: -320px;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: spark-1 4s linear infinite;
  animation: spark-1 4s linear infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.header-bg__sparks-spark-3 {
  background: url("../images/bg/header_anim/spark_3.png") no-repeat;
  width: 128px;
  height: 165px;
  right: 280px;
  bottom: -140px;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: spark-3 4s linear infinite;
  animation: spark-3 4s linear infinite;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

@-webkit-keyframes spark-3 {
  0% {
    bottom: -140px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -80px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -20px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: 40px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 100px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes spark-3 {
  0% {
    bottom: -140px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -80px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -20px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: 40px;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 100px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.header-bg__sparks-spark-4 {
  background: url("../images/bg/header_anim/spark_4.png") no-repeat;
  width: 794px;
  height: 176px;
  right: 0;
  bottom: -180px;
  -webkit-transform: scale(0.6);
  -ms-transform: scale(0.6);
  transform: scale(0.6);
  -webkit-animation: spark-4 4s linear infinite;
  animation: spark-4 4s linear infinite;
}

@-webkit-keyframes spark-4 {
  0% {
    bottom: -180px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -120px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -60px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 60px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes spark-4 {
  0% {
    bottom: -180px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
    opacity: 1;
  }
  25% {
    bottom: -120px;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
    opacity: 1;
  }
  88% {
    bottom: -60px;
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 1;
  }
  75% {
    bottom: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.5;
  }
  to {
    bottom: 60px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}