@import url('https://fonts.googleapis.com/css?family=Ubuntu:400,400i,700,700i');

.holder {
    margin-top: 6rem;
    margin-bottom: 12rem;
    max-width: 100px;
    height: 210px;
    position: relative;
    justify-content: center;
}

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

.candle {
    bottom: 0;
    width: 45px;
    height: 500px;
    border-radius: 45px / 25px;
    box-shadow: inset 20px -30px 50px 0 rgba(124, 124, 124, 0.4), inset -20px 0 50px 0 rgba(124, 124, 124, 0.4);
    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: 30px;
    border-radius: 50%;
    border: 2px solid #d47401;
    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: 34px;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    top: 14px;
    box-shadow: 0 0 20px 0 rgba(124, 124, 124, 0.5);
    background: -moz-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -webkit-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -o-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -ms-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
}

.candle-seven {
    bottom: 0;
    width: 45px;
    height: 500px;
    border-radius: 45px / 20px;
    box-shadow: inset 20px -30px 50px 0 rgba(124, 124, 124, 0.4), inset -20px 0 50px 0 rgba(124, 124, 124, 0.4);
    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-seven:before {
    width: 100%;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #d47401;
    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-seven:after {
    width: 34px;
    height: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    top: 14px;
    box-shadow: 0 0 20px 0 rgba(124, 124, 124, 0.5);
    background: -moz-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -webkit-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -o-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: -ms-radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
    background: radial-gradient(rgba(124, 124, 124, 0.6), transparent 45%);
}


.thread {
    width: 4px;
    height: 30px;
    top: -10px;
    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: 16px;
    height: 120px;
    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: 40px;
    }

    50% {
        height: 60px;
    }
}

.glow {
    width: 16.5px;
    height: 25px;
    border-radius: 50% 50% 40% 40%;
    left: 50%;
    top: -15px;
    transform: translateX(-50%);
    background: rgba(0, 133, 255, .7);
    box-shadow: 0 -40px 30px 0 #dc8a0c, 0 40px 50px 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: 70%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    border-radius: 50%;
    background: rgba(124, 124, 124, 0.35);
}

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

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

.candle-holder {
    width: 100px;
    position: absolute;
    top: 190px;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: 10;
}

.requester {
    width: 200px;
    top: 290px;
    left: 5%;
    bottom: -1px;
    transform: translateX(-65%);
    z-index: 1;
    text-align: center;
    word-break: unset;
}