.holder {
  margin: 12rem auto 0;
  width: 50px;
  height: 0px;
  position: relative;
  }

.holder *, .holder *:before, .holder *:after {
  position: absolute;
  content: "";
}

.candle {
  bottom: 0;
  width: 50px;
  height: 100px;
  border-radius: 100px / 40px;
  box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  /*background: -moz-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
  background: -webkit-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
  background: -o-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
  background: -ms-linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);*/
  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
  width: 100%;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #d47401;
  background: #b86409;
 /* background: -moz-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
  background: -webkit-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
  background: -o-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
  background: -ms-radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
  background: radial-gradient(#ffef80, #b86409 60%);*/
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
  width: 17px;
  height: 5px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 7px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  /*background: -moz-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
  background: -o-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
  background: -ms-radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);*/
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}


/* Blaue Kerze */
.blau {
  background: linear-gradient(#1e90ff, #00bfff, #4682b4, #1e90ff 50%, #104e8b);
}

.blau:before {
  border-color: #1e90ff;
  background: radial-gradient(#87cefa, #1e90ff 45%, #4682b4 80%);
}

/* Gelbe Kerze */
.gelb {
  background: linear-gradient(#ffec8b, #ffd700, #ffc125, #ffec8b 50%, #cdad00);
}

.gelb:before {
  border-color: #ffd700;
  background: radial-gradient(#ffebcd, #ffd700 45%, #ffc125 80%);
}

/* Grüne Kerze */
.gruen {
  background: linear-gradient(#32cd32, #00fa9a, #228b22, #32cd32 50%, #006400);
}

.gruen:before {
  border-color: #32cd32;
  background: radial-gradient(#90ee90, #32cd32 45%, #228b22 80%);
}

/* Rote Kerze */
.rot {
  background: linear-gradient(#ff4500, #ff6347, #cd5c5c, #ff4500 50%, #8b0000);
}

.rot:before {
  border-color: #ff4500;
  background: radial-gradient(#ff7f50, #ff4500 45%, #cd5c5c 80%);
}

/* Lila Kerze */
.lila {
  background: linear-gradient(#9370db, #8a2be2, #7b68ee, #9370db 50%, #4b0082);
}

.lila:before {
  border-color: #9370db;
  background: radial-gradient(#ba55d3, #9370db 45%, #8a2be2 80%);
}

/* Pinke Kerze */
.pink {
  background: linear-gradient(#ff69b4, #ff1493, #ff6eb4, #ff69b4 50%, #c71585);
}

.pink:before {
  border-color: #ff69b4;
  background: radial-gradient(#ffc0cb, #ff69b4 45%, #ff1493 80%);
}

/* Orange Kerze */
.orange {
  background: linear-gradient(#ff8c00, #ffa500, #ff7f50, #ff8c00 50%, #e65100);
}

.orange:before {
  border-color: #ff8c00;
  background: radial-gradient(#ffa07a, #ff8c00 45%, #ff7f50 80%);
}

/* Türkise Kerze */
.tuerkis {
  background: linear-gradient(#40e0d0, #48d1cc, #00ced1, #40e0d0 50%, #20b2aa);
}

.tuerkis:before {
  border-color: #40e0d0;
  background: radial-gradient(#afeeee, #40e0d0 45%, #00ced1 80%);
}

/* Hellgraue Kerze */
.hellgrau {
  background: linear-gradient(#dcdcdc, #c0c0c0, #a9a9a9, #dcdcdc 50%, #696969);
}

.hellgrau:before {
  border-color: #dcdcdc;
  background: radial-gradient(#f5f5f5, #dcdcdc 45%, #a9a9a9 80%);
}

/* Dunkelblaue Kerze */
.dunkelblau {
  background: linear-gradient(#00008b, #0000cd, #4169e1, #00008b 50%, #191970);
}

.dunkelblau:before {
  border-color: #00008b;
  background: radial-gradient(#1e90ff, #00008b 45%, #4169e1 80%);
}

/* Braun Kerze */
.braun {
  background: linear-gradient(#8b4513, #a0522d, #cd853f, #8b4513 50%, #5c4033);
}

.braun:before {
  border-color: #8b4513;
  background: radial-gradient(#d2691e, #8b4513 45%, #cd853f 80%);
}

/* Silberne Kerze */
.silber {
  background: linear-gradient(#c0c0c0, #d3d3d3, #a9a9a9, #c0c0c0 50%, #808080);
}

.silber:before {
  border-color: #c0c0c0;
  background: radial-gradient(#dcdcdc, #c0c0c0 45%, #a9a9a9 80%);
}


.thread {  
  width: 3px;
  height: 18px;
  top: -8.5px;
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  transform: translateX(-50%);
  background: #121212;
  background: -moz-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
  background: -webkit-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
  background: -o-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
  background: -ms-linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 12px;
  height: 40px;
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: -moz-linear-gradient(white 80%, transparent);
  background: -webkit-linear-gradient(white 80%, transparent);
  background: -o-linear-gradient(white 80%, transparent);
  background: -ms-linear-gradient(white 80%, transparent);
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes enlargeFlame {
  0%, 100% {
    height: 60px;
  }
  50% {
    height: 70px;
  }
}

.glow {
  width: 13px;
  height: 30px;
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -24px;
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow: 0 -20px 15px 0 #dc8a0c, 0 20px 25px 0 #dc8a0c, inset 3px 0 2px 0 rgba(0, 133, 255, .6), inset -3px 0 2px 0 rgba(0, 133, 255, .6);
}

.glow:before {
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

/*
.blinking-glow {
  width: 50px;
  height: 90px;
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  -webkit-filter: blur(25px);
  -moz-filter: blur(30px);
  -o-filter: blur(30px);
  -ms-filter: blur(30px);
  filter: blur(30px);
  animation: blinkIt .1s infinite;
}

@keyframes blinkIt {
  50% { opacity: .8;}
}
*/