1.holder {
2  margin: 12rem auto 0;
3  width: 150px;
4  height: 400px;
5  position: relative;
6}
7
8.holder *, .holder *:before, .holder *:after {
9  position: absolute;
10  content: "";
11}
12
13.candle {
14  bottom: 0;
15  width: 150px;
16  height: 300px;
17  border-radius: 150px / 40px;
18  -webkit-box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
19  box-shadow: inset 20px -30px 50px 0 rgba(0, 0, 0, 0.4), inset -20px 0 50px 0 rgba(0, 0, 0, 0.4);
20  background: #190f02;
21  background: -webkit-gradient(linear, left top, left bottom, from(#e48825), color-stop(#e78e0e), color-stop(#833c03), color-stop(50%, #4c1a03), to(#1c0900));
22  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
23}
24
25.candle:before {
26  width: 100%;
27  height: 40px;
28  border-radius: 50%;
29  border: 2px solid #d47401;
30  background: #b86409;
31  background: radial-gradient(#ffef80, #b86409 60%);
32  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
33}
34
35.candle:after {
36  width: 34px;
37  height: 10px;
38  left: 50%;
39  -webkit-transform: translateX(-50%);
40  -ms-transform: translateX(-50%);
41  transform: translateX(-50%);
42  border-radius: 50%;
43  top: 14px;
44  -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
45  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
46  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
47}
48
49.thread {
50  width: 6px;
51  height: 36px;
52  top: -17px;
53  left: 50%;
54  z-index: 1;
55  border-radius: 40% 40% 0 0;
56  -webkit-transform: translateX(-50%);
57  -ms-transform: translateX(-50%);
58  transform: translateX(-50%);
59  background: #121212;
60  background: -webkit-gradient(linear, left top, left bottom, from(#d6994a), color-stop(#4b232c), color-stop(#121212), color-stop(black), color-stop(90%, #e8bb31));
61  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
62}
63
64.flame {
65  width: 24px;
66  height: 120px;
67  left: 50%;
68  -webkit-transform-origin: 50% 100%;
69  -ms-transform-origin: 50% 100%;
70  transform-origin: 50% 100%;
71  -webkit-transform: translateX(-50%);
72  -ms-transform: translateX(-50%);
73  transform: translateX(-50%);
74  bottom: 100%;
75  border-radius: 50% 50% 20% 20%;
76  background: rgba(255, 255, 255, 1);
77  background: -webkit-gradient(linear, left top, left bottom, color-stop(80%, white), to(transparent));
78  background: linear-gradient(white 80%, transparent);
79  -webkit-animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
80  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
81}
82
83.flame:before {
84  width: 100%;
85  height: 100%;
86  border-radius: 50% 50% 20% 20%;
87  -webkit-box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
88  box-shadow: 0 0 15px 0 rgba(247, 93, 0, .4), 0 -6px 4px 0 rgba(247, 128, 0, .7);
89}
90
91@-webkit-keyframes moveFlame {
92  0%, 100% {
93    -webkit-transform: translateX(-50%) rotate(-2deg);
94    transform: translateX(-50%) rotate(-2deg);
95  }
96
97  50% {
98    -webkit-transform: translateX(-50%) rotate(2deg);
99    transform: translateX(-50%) rotate(2deg);
100  }
101}
102
103@keyframes moveFlame {
104  0%, 100% {
105    -webkit-transform: translateX(-50%) rotate(-2deg);
106    transform: translateX(-50%) rotate(-2deg);
107  }
108
109  50% {
110    -webkit-transform: translateX(-50%) rotate(2deg);
111    transform: translateX(-50%) rotate(2deg);
112  }
113}
114
115@-webkit-keyframes enlargeFlame {
116  0%, 100% {
117    height: 120px;
118  }
119
120  50% {
121    height: 140px;
122  }
123}
124
125@keyframes enlargeFlame {
126  0%, 100% {
127    height: 120px;
128  }
129
130  50% {
131    height: 140px;
132  }
133}
134
135.glow {
136  width: 26px;
137  height: 60px;
138  border-radius: 50% 50% 35% 35%;
139  left: 50%;
140  top: -48px;
141  -webkit-transform: translateX(-50%);
142  -ms-transform: translateX(-50%);
143  transform: translateX(-50%);
144  background: rgba(0, 133, 255, .7);
145  -webkit-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);
146  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);
147}
148
149.glow:before {
150  width: 70%;
151  height: 60%;
152  left: 50%;
153  -webkit-transform: translateX(-50%);
154  -ms-transform: translateX(-50%);
155  transform: translateX(-50%);
156  bottom: 0;
157  border-radius: 50%;
158  background: rgba(0, 0, 0, 0.35);
159}
160
161.blinking-glow {
162  width: 100px;
163  height: 180px;
164  left: 50%;
165  top: -55%;
166  -webkit-transform: translateX(-50%);
167  -ms-transform: translateX(-50%);
168  transform: translateX(-50%);
169  border-radius: 50%;
170  background: #ff6000;
171  -webkit-filter: blur(50px);
172  -moz-filter: blur(60px);
173  -o-filter: blur(60px);
174  -ms-filter: blur(60px);
175  filter: blur(60px);
176  -webkit-animation: blinkIt .1s infinite;
177  animation: blinkIt .1s infinite;
178}
179
180@-webkit-keyframes blinkIt {
181  50% {
182    opacity: .8;
183  }
184}
185
186@keyframes blinkIt {
187  50% {
188    opacity: .8;
189  }
190}
191
192
193