* {
  margin: 0;
  padding: 0;;
}
body {
  overflow: hidden;
}

.ambiente-terror{
    position:fixed;
    top:20px;
    right:30px;
    pointer-events:none;
}

#ojos-rojos{
    position:fixed;
    top:45%;
    left:50%;
    transform:translate(-50%,-50%);

    width:220px;
    height:80px;

    opacity:0;

    transition:opacity 1.5s ease;

    z-index:5;
}

#ojos-rojos::before,
#ojos-rojos::after{

    content:"";

    position:absolute;

    width:60px;
    height:35px;

    background:
    radial-gradient(circle at center,
    #ff0000 0%,
    #ff0000 10%,
    #990000 25%,
    #440000 45%,
    transparent 70%);

    border-radius:50% 50% 40% 40%;

    box-shadow:
    0 0 15px #ff0000,
    0 0 35px #ff0000,
    0 0 70px #880000;

    animation:
    miradaMaldita 4s infinite alternate,
    brilloMaldito 2s infinite alternate;
}

#ojos-rojos::before{
    left:20px;
}

#ojos-rojos::after{
    right:20px;
}

#ojos-rojos.mirando{
    opacity:1;
}

@keyframes brilloMaldito{

    from{
        filter:brightness(.6);
    }

    to{
        filter:brightness(1.8);
    }

}

@keyframes miradaMaldita{

    0%{
        transform:translateY(0) scaleY(1);
    }

    45%{
        transform:translateY(0) scaleY(1);
    }

    50%{
        transform:translateY(0) scaleY(.05);
    }

    55%{
        transform:translateY(0) scaleY(1);
    }

    100%{
        transform:translateY(0) scaleY(1);
    }

}
    .holder {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;

}

.scene {
  width: 100%;
  height: 43%;
  position: absolute;
  left: 50%;
  top: 50%;
  padding-bottom: 40%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}


.holder .image {

  top: 50%;
  background-image: url(https://preview.animatedcreativity.com/images/candle/roberto-tumini-12659-modified.jpg);
  background-size: cover;
  background-position: bottom;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}
.holder .flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #FFFD38;
  opacity: 0.1;
  animation: animateFlash 5s infinite linear;
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}
@keyframes animateFlash {
  0% {
    opacity: 0.1;
  }
  10% {
    opacity: 0.05;
  }
  20% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.08;
  }
  40% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.05;
  }
  60% {
    opacity: 0.07;
  }
  70% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.07;
  }
  90% {
    opacity: 0.09;
  }
  100% {
    opacity: 0.1;
  }
}

.candle { /*width and height ratio: 1:3*/
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 20%;
  height: 0%;
  padding-bottom: 60%;
  transform: translateX(-50%);
  filter: blur(5px);
}

.candle div {
  box-sizing: border-box;
}

.candle .rectangle1 {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 75%;
  height: 70%;
  background-color: #AAAAAA; /*e9e4e4*/
  transform: translateX(-50%) translateY(-50%);
}

.candle .circle1 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 75%;
  height: 0%;
  padding-bottom: 35%;
  border-radius: 50%;
  background-color: #AAAAAA;
  transform: translateX(-50%) translateY(-50%);
}


.candle .circle2 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 55%;
  height: 0%;
  padding-bottom: 23%;
  border-radius: 50%;
  background-color: #ccc;
  transform: translateX(-50%) translateY(-50%);
}

.candle .circle3 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 30%;
  height: 0%;
  padding-bottom: 8%;
  border-radius: 50%;
  background-color: #b5b5b5;
  transform: translateX(-50%) translateY(-50%);
}

.candle .rectangle2 {
  position: absolute;
  left: 0%;
  top: 32.5%;
  width: 20%;
  height: 30%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(25%) translateY(-50%);
}

.candle .rectangle3 {
  position: absolute;
  right: 0%;
  top: 25.5%;
  width: 20%;
  height: 17%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(-25%) translateY(-50%);
}

.candle .rectangle5 {
  position: absolute;
  right: 0%;
  top: 32%;
  width: 5%;
  height: 13%;
  border-radius: 30%;
  background-color: #AAAAAA;
  transform: translateX(-160%) translateY(-50%);
}

.candle .rectangle4 {
  position: absolute;
  left: 50%;
  top: 15.5%;
  width: 5%;
  height: 8%;
  border-radius: 20%;
  background-color: #666;
  transform: translateX(-50%) translateY(-50%);
}

.candle .base1 {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 88%;
  height: 12%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(-50%) translateY(-50%);
}

.candle .base2 {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 100%;
  height: 12%;
  border-radius: 50%;
  background-color: #AAAAAA;
  transform: translateX(-50%);
}

.candle .flames {
  position: absolute;
  width: 40%;
  height: 0%;
  padding-bottom: 40%;
  transform-origin: 50% 100%;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  animation: animateFlames 2s infinite linear;
}
@keyframes animateFlames {
  25% {
    transform: translateX(-50%) rotateZ(-10deg);
  }
  75% {
    transform: translateX(-50%) rotateZ(7deg);
  }
}
.candle .flames div {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 100%;
  height: 0%;
  padding-bottom: 100%;
  border-radius: 0px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #FFFD38;
  transform: translateX(-50%) translateY(25%) rotateZ(45deg);
  animation: animateFlame 3s infinite linear;
  filter: blur(1px);
}

.candle .flames .flame2 {
  left: 50%;
  top: auto;
  bottom: 0.5%;
  width: 75%;
  height: 0%;
  padding-bottom: 75%;
  background-color: #FD7D23;
  animation: animateFlame 4s infinite linear;
}

.candle .flames .flame3 {
  left: 50%;
  top: auto;
  bottom: 1.5%;
  width: 50%;
  height: 0%;
  padding-bottom: 50%;
  background-color: #FB0D1B;
  animation: animateFlame 5s infinite linear;
}

.candle .flames .flame4 {
  left: 50%;
  top: auto;
  bottom: 1.5%;
  width: 200%;
  height: 0%;
  padding-bottom: 200%;
  animation: animateFlame 3s infinite linear;
  filter: blur(10px);
  opacity: 0.5;
}

@keyframes animateFlame {
  0% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(0deg);
  }
  10% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(10deg);
  }
  20% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-10deg);
  }
  30% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(5deg);
  }
  40% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-10deg);
  }
  50% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(7deg);
  }
  60% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-2deg);
  }
  70% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(8deg);
  }
  80% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-5deg);
  }
  90% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(7deg);
  }
  100% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(0deg);
  }
}


.preloader {
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preloader div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  animation: animatePreloader 1s infinite linear;
  transform-origin: 50% 100%;
}
.preloader div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  border: 3px solid #333;
  border-radius: 50%;
  box-sizing: border-box;
}
.preloader div:nth-child(2) {
  width: 60%;
  height: 60%;
  top: 20%;
  animation: animatePreloader 0.5s infinite linear;
}
@keyframes animatePreloader {
  0% {
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
  }
}