@-webkit-keyframes float {
  0% {
    transform: translateX(0) translateY(10px);
  }
  25% {
    transform: translateX(20px) translateY(0);
  }
  50% {
    transform: translateX(0) translateY(-10px);
  }
  75% {
    transform: translateX(-20px) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(10px);
  }
}
@keyframes float {
  0% {
    transform: translateX(0) translateY(10px);
  }
  25% {
    transform: translateX(20px) translateY(0);
  }
  50% {
    transform: translateX(0) translateY(-10px);
  }
  75% {
    transform: translateX(-20px) translateY(0);
  }
  100% {
    transform: translateX(0) translateY(10px);
  }
}
@-webkit-keyframes fireFront {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    transform: translateX(2.5px) translateY(-5px);
  }
  20% {
    transform: translateX(0) translateY(-15px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
    transform: translateX(0) translateY(-25px);
  }
  50% {
    transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
    transform: translateX(0) translateY(-35px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
    transform: translateX(0) translateY(-45px);
  }
  90% {
    transform: translateX(2.5px) translateY(-50px);
  }
  100% {
    transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@keyframes fireFront {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    transform: translateX(2.5px) translateY(-5px);
  }
  20% {
    transform: translateX(0) translateY(-15px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-20px);
  }
  40% {
    transform: translateX(0) translateY(-25px);
  }
  50% {
    transform: translateX(2.5px) translateY(-30px);
    opacity: 0.2;
  }
  60% {
    transform: translateX(0) translateY(-35px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-40px);
  }
  80% {
    transform: translateX(0) translateY(-45px);
  }
  90% {
    transform: translateX(2.5px) translateY(-50px);
  }
  100% {
    transform: translateX(0) translateY(-55px);
    opacity: 0;
  }
}
@-webkit-keyframes fireMid {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    transform: translateX(2.5px) translateY(-10px);
  }
  20% {
    transform: translateX(0) translateY(-20px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
    transform: translateX(0) translateY(-40px);
  }
  50% {
    transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
    transform: translateX(0) translateY(-60px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
    transform: translateX(0) translateY(-80px);
  }
  90% {
    transform: translateX(2.5px) translateY(-90px);
  }
  100% {
    transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@keyframes fireMid {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.6;
  }
  10% {
    transform: translateX(2.5px) translateY(-10px);
  }
  20% {
    transform: translateX(0) translateY(-20px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-30px);
  }
  40% {
    transform: translateX(0) translateY(-40px);
  }
  50% {
    transform: translateX(2.5px) translateY(-50px);
    opacity: 0.1;
  }
  60% {
    transform: translateX(0) translateY(-60px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-70px);
  }
  80% {
    transform: translateX(0) translateY(-80px);
  }
  90% {
    transform: translateX(2.5px) translateY(-90px);
  }
  100% {
    transform: translateX(0) translateY(-100px);
    opacity: 0;
  }
}
@-webkit-keyframes fireBack {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
    transform: translateX(2.5px) translateY(-20px);
  }
  20% {
    transform: translateX(0) translateY(-40px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
    transform: translateX(0) translateY(-80px);
  }
  50% {
    transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
    transform: translateX(0) translateY(-120px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
    transform: translateX(0) translateY(-160px);
  }
  90% {
    transform: translateX(2.5px) translateY(-180px);
  }
  100% {
    transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}
@keyframes fireBack {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 0.8;
  }
  10% {
    transform: translateX(2.5px) translateY(-20px);
  }
  20% {
    transform: translateX(0) translateY(-40px);
  }
  30% {
    transform: translateX(-2.5px) translateY(-60px);
  }
  40% {
    transform: translateX(0) translateY(-80px);
  }
  50% {
    transform: translateX(2.5px) translateY(-100px);
    opacity: 0.1;
  }
  60% {
    transform: translateX(0) translateY(-120px);
  }
  70% {
    transform: translateX(-2.5px) translateY(-140px);
  }
  80% {
    transform: translateX(0) translateY(-160px);
  }
  90% {
    transform: translateX(2.5px) translateY(-180px);
  }
  100% {
    transform: translateX(0) translateY(-200px);
    opacity: 0;
  }
}

.fire_container {width: 100%;height: 100%;position: absolute;flex-direction: row;flex-wrap: nowrap;justify-content: center;	align-items: center;z-index: 2;	top: 1px; left: 45px; }

/*.fire_container .fire {
	width: 320px;
	min-width: 300px;
	height: 320px;
	min-height: 300px;
	position: relative;
	-webkit-animation: float 30s ease-in-out infinite;
	animation: float 30s ease-in-out infinite;
}*/

.fire_container .fire.debug { border: 1px solid red; }

.fire_container .fire.debug .fire-front span,
.fire_container .fire.debug .fire-mid span,
.fire_container .fire.debug .fire-back span {
	background: none; border-radius: 0px; border: 1px solid blue;
}

.fire_container .fire.debug .fireplace { border: 1px solid yellow; }
.fire_container .fire.debug .fireplace img { display: none; }
.fire_container .fire .fire-front { position: absolute; width: 30px; height: 60px; bottom: 20px; left: 50%; margin-left: -65px; z-index: 4; }
.fire_container .fire .fire-front span { display: inline-block; position: absolute; bottom: 0px; left: 50%; width: 20px;height: 20px;
  margin-left: -10px;border-radius: 50%; opacity: 0;  background-color: #ecf0f1;
  background: radial-gradient(ellipse at center, #ecf0f1 0%, #ecf0f1 25%, rgba(236, 240, 241, 0) 100%);
  transform: translateX(0) translateY(0);
  -webkit-animation-name: fireFront;
          animation-name: fireFront;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.2s;
          animation-duration: 0.2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.fire_container .fire .fire-mid { position: absolute; width: 30px; height: 60px; bottom: 15px; left: 50%; margin-left: -68px; z-index: 3; }
.fire_container .fire .fire-mid span { display: inline-block; position: absolute; bottom: 0px; left: 50%; width: 20px; height: 20px;
  margin-left: -10px; border-radius: 50%; opacity: 0; background-color: #f1c40f;
  background: radial-gradient(ellipse at center, #f1c40f 0%, #f1c40f 25%, rgba(241, 196, 15, 0) 100%);
  transform: translateX(0) translateY(0);
  -webkit-animation-name: fireMid;
          animation-name: fireMid;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.fire_container .fire .fire-back { position:absolute; width:20px;  height:40px; bottom:5px; left:50%;margin-left:-70px; z-index:2; }
.fire_container .fire .fire-back span {display: inline-block;position: absolute;bottom: 0px;left: 50%;width: 20px; height: 20px;
  margin-left: -10px;border-radius: 50%;opacity: 0;background-color: #e67e22;
  background: radial-gradient(ellipse at center, #e67e22 0%, rgba(230, 126, 34, 0) 100%);
  transform: translateX(0) translateY(0);
  -webkit-animation-name: fireBack;
          animation-name: fireBack;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
  -webkit-animation-duration: 0.6s;
          animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.fire_container .fire .fireplace {width: 300px; height: 100px; position: absolute;bottom: -30px;left: 10px;z-index: 0;}
.fire_container .fire .fireplace > img { width: 100%; height: auto;}