*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: black;
}

:root {
    --bg-1: rgba(53, 69, 59, 1);
    /* Hintergrundfarbe */
    --bg-2: rgba(26, 50, 51, 1);
    /* äußere Kreisfarbe */
    --bg-3: rgba(34, 53, 49, 1);
    /* mittlere Kreisfarbe */
    --bg-4: rgba(53, 69, 59, 1);
    /* innere Kreisfarbe */
    --black: #000000;
    --yellow: #f6d005;
    --orange: #f58407;
    --shadow: #cbc0da;
    --body: #f5f5f5;
    --candle-height: 50vh;
    --flame-dark: #fcc804;
    --flame-light: white;
}


.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    height: 50vh;
}

.candle,
.candle2,
.candle3,
.candle4 {
    position: relative;
    border-radius: 5%;
}

.candleBody {
    width: 10vw;
    height: var(--candle-height);
    /* border: 0px solid var(--bg-1);
    border-bottom: none;
    */
    -webkit-border-radius: 45px 45px 0 0;
    border-radius: 45px 45px 0 0;
    position: relative;
    cursor: pointer;
    background-image: url("../images/kerze_rot_hg.png") !important;
    background-repeat: repeat-y;
    background-size: 100% 100%;
    background-position: center;

    /* background: linear-gradient(90deg,
													rgb(164,38,15),
													rgb(245,1,1),
													rgb(246,49,41),
													rgb(215,7,7),
													rgb(197,37,37),
													rgb(199,17,16),
													rgb(214,50,48),
													rgb(209,26,18)); */

}

.candle.week1 .candleBody {
    height: 50vh;
    /*background: red;*/
}

.candle.week2 .candleBody {
    height: 45vh;
    /*background: orange;*/
}

.candle.week3 .candleBody {
    height: 40vh;
    /*background: yellow;*/
}

.candle.week4 .candleBody {
    height: 35vh;
    /*background: green;*/
}


.candle2.week1 .candleBody {
    height: 50vh;
}

.candle2.week2 .candleBody {
    height: 50vh;
}

.candle2.week3 .candleBody {
    height: 45vh;
}

.candle2.week4 .candleBody {
    height: 40vh;
}





.candle3.week1 .candleBody {
    height: 50vh;
}

.candle3.week2 .candleBody {
    height: 50vh;
}

.candle3.week3 .candleBody {
    height: 50vh;
}

.candle3.week4 .candleBody {
    height: 45vh;
}


.candle4.week1 .candleBody {
    height: 50vh;
}

.candle4.week2 .candleBody {
    height: 50vh;
}

.candle4.week3 .candleBody {
    height: 50vh;
}

.candle4.week4 .candleBody {
    height: 50vh;
}

/* .candleBody:after {
    content: "";
    position: absolute;
    top: -10px;
    left: 48%;
    width: 3px;
    height: 41px;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    background: var(--black);
    z-index: 1;
} */

/*
.holder {
  margin: 12rem auto 0;
  width: 150px;
  height: 400px;
  position: relative;
}

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

.candle {
  bottom: 0;
  width: 150px;
  height: 300px;
  border-radius: 150px / 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: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
  width: 100%;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #d47401;
  background: #b86409;
  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(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}
*/

/*** CANDLES ***/

.candle,
.candle2,
.candle3,
.candle4 {
    /* position: absolute; */
    display: flex;
    justify-content: center;
}

.candle,
.candle2,
.candle3,
.candle4 {
    bottom: 1px;
}

.candle:before,
.candle2:before,
.candle3:before,
.candle4:before {
    content: '';
    position: absolute;
    width: 100%;
    border-radius: 100%;
    /* background: rgb(249,26,18); */
}

.candle:after,
.candle2:after,
.candle3:after,
.candle4:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 30px;
    border-radius: 100%;
    bottom: -14px;
}


/* .candle,
.cCandle:after,
.candle1,
.candle1:after,
.candle2,
.candle2:after,
.candle3,
.candle3:after,
.candle4,
.candle4:after {
    background: linear-gradient(90deg,
            rgb(164, 38, 15),
            rgb(245, 1, 1),
            rgb(246, 49, 41),
            rgb(215, 7, 7),
            rgb(197, 37, 37),
            rgb(199, 17, 16),
            rgb(214, 50, 48),
            rgb(209, 26, 18));
} */

.lgCandle {
    height: 260px;
    width: 185px;
    right: 0;
    box-shadow: 0px 2px 6px rgba(159, 94, 52, 1) inset,
        0px 2px 6px rgba(159, 94, 52, 0.55);
    z-index: 3;
}

.lgCandle:before {
    height: 22px;
    top: -12px;
    border-bottom: 1px solid rgb(207, 14, 15);
}

.lgCandle:after {
    box-shadow: 0px 3px 3px rgba(46, 2, 3, 0.3);
}

.flameBox {
    height: 100px;
    width: 50px;
    position: absolute;
    top: -103px;
    left: 0;
    right: 0;
    margin: 0 auto;
    animation-name: flame;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* .candle,
.candle2,
.candle3,
.candle4{
  font-size:2em;
  margin:0 auto;width:8em;height:8em;
  position: fixed; 
  left: 35%;
  top: 35%;
  border-radius:50%/20%;
  background:#000;
  background-image:-moz-linear-gradient(-90deg, #555, rgba(255, 255, 255, 0.2));
  background-image:-webkit-linear-gradient(-90deg, #555, rgba(255, 255, 255, 0.2));
  background-image:linear-gradient(to bottom, #555, rgba(255, 255, 255, 0.2));
  box-shadow:
    0 0.5em 1em 0.5em rgba(0, 0, 0, 0.5),
    0 -1em 2em rgba(0, 0, 0, 0.9) inset,
    0em -2em 4em rgba(200,100,0,0.5) inset,
    0 -4em 2em 1em rgba(122, 0, 0, 0.7) inset,
    0em 0em 2em rgba(200,200,200,0.5) inset,
    0 -5.1em 0.3em 0.2em rgba(200, 100, 0, 0.5) inset,
    0em -0.1em 0.5em rgba(0,0,0,0.9) inset,
    0 0 0 4em rgba(255, 255, 250, 0.8) inset,
    0 -6em 2em 0em rgba(50,30,0,0.7),
    0 0 4em 5em rgba(50,30,0,0.2),
    0 0 0 0 transparent;
 } */

/* .candle:before {
  content:"";
  display:block;
  width:20%;
  height:70%;
  position:relative;
  top:-60%;
  margin:0 auto;
  border-radius:30% 100% 50% 50% / 60% 60% 60% 60%;
  box-shadow:
    0em 2em 1em rgba(255, 255, 0, 0.5) inset,
    0em 3em 0.5em rgba(250, 100, 50, 0.8) inset,
    0 0 0.5em 0 rgba(255, 255, 0, 0.7)
    ;
  background:transparent;
  background-image:-moz-linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent);
  background-image:-webkit-linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent);
  background-image:linear-gradient(-90deg, transparent,rgba(0,100,100,0.3),transparent);
  -moz-transform: skewX(0deg) skewY(0deg);
  -webkit-transform: skewX(0deg) skewY(0deg);
  transform: skewX(0deg) skewY(0deg);
  -moz-transform-origin: center bottom;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -moz-animation: air 2s ease-in infinite;
  -webkit-animation: air 2s ease-in infinite;
  animation: air 2s ease-in infinite;
}
.candle:after{
  content:"";
  display:block;
  width:0.2em;
  height:1.3em;
  position:absolute;
  top:-5%;
  left:49%;
  background:#fff;
  background-image:-moz-linear-gradient(-90deg,#311,#eec 70%,#eec);
  background-image:-webkit-linear-gradient(-90deg,#311,#eec 70%,#eec);
  background-image:linear-gradient(to bottom,#311,#eec 70%,#eec);
} */


.flame-onfire,
.flame {
    position: absolute;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    margin-top: -60px;
    /* top: -3.5vh;
    left: 4.25vw; */
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-transform-origin: bottom center;
    -ms-transform-origin: bottom center;
    transform-origin: bottom center;
    width: 40px;
    height: 30px;
    -webkit-animation: wind 2s infinite;
    animation: wind 2s infinite;
    opacity: 0.9;
}

@-webkit-keyframes wind {
    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    75% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@keyframes wind {
    25% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    75% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
}

@-webkit-keyframes blink {

    0%,
    100% {
        -webkit-transform: scaleY(0.05);
        transform: scaleY(0.05);
    }

    5%,
    95% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

@keyframes blink {

    0%,
    100% {
        -webkit-transform: scaleY(0.05);
        transform: scaleY(0.05);
    }

    5%,
    95% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
}

.flame-onfire .flame-small {
    position: absolute;
    margin: 35%;
    /* left: 4vw; /
    top: -3vh;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); */
    background: var(--flame-light);
    width: 15px;
    height: 20px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.flame-onfire .flame-small::before {
    content: "";
    background: var(--flame-light);
    position: absolute;
    width: 12px;
    height: 15px;
    top: -11px;
    left: 2px;
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.flame-onfire .flame-big {
    position: absolute;
    background: var(--flame-dark);
    width: 40px;
    height: 40px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.flame-onfire .flame-big::before {
    content: "";
    width: 40px;
    height: 37px;
    top: -22px;
    left: 0px;
    background: var(--flame-dark);
    position: absolute;
    -webkit-clip-path: polygon(50% 0%, 1% 100%, 99% 100%);
    clip-path: polygon(50% 0%, 1% 100%, 99% 100%);
}

.circleNr {
    position: absolute;
    /* z-index:9999; */
    top: 2em;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 4rem;
    width: 4rem;
    background-color: white;
    color: darkgoldenrod;
    border: 3px dashed darkgoldenrod;
    border-radius: 50%;
    line-height: 3.5rem;
    font-size: 2rem;
    display: inline-table;
    text-align: center;
}




.circles {
    width: 285px;
    height: 285px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    -webkit-transform: translate(-50%);
    -ms-transform: translate(-50%);
    transform: translate(-50%);
    left: 50%;
    top: -225px;
    background-image:
        -webkit-radial-gradient(center center, circle, var(--bg-4), var(--bg-4) 58px, var(--bg-3) 58px, var(--bg-3) 100px, var(--bg-2) 100px, var(--bg-2));
    background-image:
        -o-radial-gradient(center center, circle, var(--bg-4), var(--bg-4) 58px, var(--bg-3) 58px, var(--bg-3) 100px, var(--bg-2) 100px, var(--bg-2));
    background-image:
        radial-gradient(circle at center center, var(--bg-4), var(--bg-4) 58px, var(--bg-3) 58px, var(--bg-3) 100px, var(--bg-2) 100px, var(--bg-2));
    -webkit-animation: shadowMove 2s infinite;
    animation: shadowMove 2s infinite;
}

.candle.week1 .circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle2.week1>.circles {
    opacity: 0;
}

.candle3.week1>.circles {
    opacity: 0;
}

.candle4.week1>.circles {
    opacity: 0;
}

.candle.week2 .circles {
    opacity: 0.9;
}

.candle2.week2>.circles {
    opacity: 0.9;
}

.candle3.week2>.circles {
    opacity: 0;
}

.candle4.week2>.circles {
    opacity: 0;
}

.candle.week3 .circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle2.week3>.circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle3.week3>.circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle4.week3>.circles {
    /* display: none!important; */
    /* display:block; */
    opacity: 0;
}

.candle.week4 .circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle2.week4>.circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle3.week4>.circles {
    /* display: none!important; */
    opacity: 0.9;
}

.candle4.week4>.circles {
    /* display: none!important; */
    opacity: 0.9;
}


@-webkit-keyframes shadowMove {

    50% {
        -webkit-transform: translate(-50%) scale(0.95);
        transform: translate(-50%) scale(0.95);
    }
}

@keyframes shadowMove {

    50% {
        -webkit-transform: translate(-50%) scale(0.95);
        transform: translate(-50%) scale(0.95);
    }
}

.baseStar {
    width: 14px;
    height: 14px;
    position: absolute;
    -webkit-animation: star 3s infinite;
    animation: star 3s infinite;
}

.baseStar:after {
    content: '';
    background: #fff;
    width: 7px;
    height: 14px;
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
    position: absolute;
    z-index: 2;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.baseStar:before {
    content: '';
    background: #fff;
    width: 14px;
    height: 7px;
    -webkit-clip-path: ellipse(50% 50% at 50% 50%);
    clip-path: ellipse(50% 50% at 50% 50%);
    position: absolute;
    z-index: 2;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}


.star1 {
    top: 64px;
    left: 42px;
    -webkit-animation-delay: 1000ms;
    animation-delay: 1000ms;
}

.star2 {
    top: 101px;
    right: 50px;
    -webkit-animation-delay: 250ms;
    animation-delay: 250ms;
}

.star3 {
    top: 200px;
    left: 28px;
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-animation-delay: 1500ms;
    animation-delay: 1500ms;
}

.star4 {
    top: 143px;
    right: 6px;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation-delay: 150ms;
    animation-delay: 150ms;
}

.star5 {
    top: 186px;
    right: 54px;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation-delay: 2000ms;
    animation-delay: 2000ms;
}

.star6 {
    top: 119px;
    left: 66px;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-animation-delay: 3000ms;
    animation-delay: 3000ms;
}

@-webkit-keyframes star {
    50% {
        -webkit-transform: scale(0.5) rotate(10deg);
        transform: scale(0.5) rotate(10deg);
    }
}

@keyframes star {
    50% {
        -webkit-transform: scale(0.5) rotate(10deg);
        transform: scale(0.5) rotate(10deg);
    }
}

.wick-onfire {
    width: 6px;
    height: 30px;
    border-left: 6px solid rgb(0, 3, 0);
    position: relative;
    top: -30px;
    left: 50%;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    z-index: 3;
}

.wick {
    width: 6px;
    height: 30px;
    border-left: 6px solid rgba(195, 195, 195, 0.875);
    position: relative;
    top: -30px;
    left: 50%;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    z-index: 3;
}

/*
.wick {
position: absolute;
width: 6px;
height: 50px;
background: #23161a;
top: 110px;
left: 50%;
transform: translateX(-50%) skewX(2deg);
border-radius: 10%;
box-shadow: 0 0 2px 0px black;
}
.wick:before {
content: "";
position: absolute;
width: 0;
left: 50%;
height: 10px;
box-shadow: 0 -14px 10px 8px white, 0 -10px 10px 8px rgba(255, 215, 0, 0.7), 0 -3px 10px 8px rgba(255, 106, 0, 0.7), 0 6px 3px 4px black;
}
.wick:after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 0px;
height: 0px;
box-shadow: 0 5px 2px 3px gold, 0 20px 2px 14px gold, 0 -6px 4px 5px rgba(98, 33, 27, 0.8), 0 0px 1px 4px rgba(255, 106, 0, 0.7), 0 0px 3px 4px #ff6a00, 0 5px 3px 4px gold;
}
*/




/* @keyframes sparkle {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}


container {
  background: repeating-linear-gradient(
    45deg,
    #ff0000,
    #ff0000 10px,
    #ffff00 10px,
    #ffff00 20px
  );
  animation: sparkle 10s linear infinite;
} */