@charset "utf-8";
/* CSS Document */



.cece{
 margin: auto;
  display: block;
	}




body{

		  background: #104545;
height: 100%;
	width: 100%;
	margin:0;
padding:0;
	
}

.agrupar{


height: 100%;
	width: 100%;
	margin: 0px;
padding: 0px;
	
}



.prueba {
	  width: 20px;
	height: auto;

}

.subir{  /* para subir boton reserva*/
top: -6rem;

}

 .caja1 {  
position: relative;
display: inline-block;
}



.ajus {  /* TODO EL CALDERO + NINA*/

  width: -30%;
background-size: 60% 60%;

}



.quitaraire{   
margin:0;
padding:0;
column-count: auto;
}




.monito{   /*  LETRERO  */
left: -2%;
top: -10px;
margin:0;
padding:0;
	  width: 20%;
}

.cajacaldero {  /* TODO EL CALDERO + NINA*/
  height: 40rem;
  margin: 0;
  position: relative;
  width: -350px  !important; 
	text-align: center;
	left: -4rem;


}


.witch {   /* NIÑA */
  bottom: 0;
  height: inherit;
  left: 2rem;  /* derecha  niña */
position: absolute;
width: 5rem  !important;  /* tamaño de la niña */

}



.cauldron {
  height: 10.5rem;
  left: 19rem;
  overflow: hidden;
  position: absolute;
  top: 23.25rem;
  width: 14rem;
}

.cauldron-body {
background: radial-gradient(circle, rgba(78,77,77,1) 0%, rgba(0,0,0,1) 53%, rgba(230,228,228,1) 100%);
  border-radius: 50%;
  bottom: 0.25rem;
  height: 12rem;
  position: absolute;
  width: 14rem;
  z-index: 4;
}

.cauldron-brim {
background: linear-gradient(0deg, rgba(0,0,0,1) 6%, rgba(105,105,105,1) 51%, rgba(133,133,133,1) 93%);
  height: 1.5rem;
  position: absolute;
  z-index: 4;
}
.cauldron-brim.-top {
  border-radius: 1.5rem;
  top: 0rem;
  width: 100%;
}
.cauldron-brim.-bottom {
background: transparent;
  border-radius: 50%;
  height: 2rem;
  left: 0.65rem;
  top: 0.5rem;
  width: 90%;
}

.cauldron-leg {
background: #000000;
  border-top-right-radius: 50%;
  border-top-left-radius: 80%;
  bottom: -1.5rem;
  height: 7rem;
  position: absolute;
  width: 2rem;
}
.cauldron-leg.-left {
  left: 1rem;
  transform: rotate(160deg) skewX(-30deg) scale(1, 0.466);
}
.cauldron-leg.-right {
  right: 1rem;
  transform: rotate(120deg) skewX(-30deg) scale(1, 0.466);
}
.cauldron-leg.-small {
  right: 3rem;
  transform: rotate(120deg) skewX(-30deg) scale(1, 0.466);
}

.goo {
  animation: goo-bob 1.5s infinite;
  border-radius: 50%;
  position: absolute;
}
.goo.-red {
  background: #B00000;
	  position: absolute;
}
.goo.-green {
  background: #93C11A;
	  position: absolute;
}
.goo.-r-left {
	  animation-delay: 0.4s;
  height: 5rem;
  right: 30rem;
  top: 21.5rem;
  width: 5rem;
}
.goo.-r-right {
  animation-delay: 0.3s;
  height: 3.5rem;
  right: 28rem;
  top: 22.5rem;
  width: 3.5rem;
}
.goo.-g-right {
  animation-delay: 0.6s;
  height: 4rem;
  left: 22rem;
  top: 22rem;
  width: 4rem;
}
.goo.-g-left {
  animation-delay: 0.4s;
  height: 2.5rem;
  left: 20.25rem;
  top: 22.5rem;
  width: 2.5rem;
}
.goo.-bottom-left {
  bottom: 0;
  height: 3rem;
  width: 3rem;
}

.bottom-goo {
  position: absolute;
  border-top-left-radius: 4rem;
  border-top-right-radius: 4rem;
  bottom: 0;
  z-index: 4;
}

.potito {
  position: absolute;
  z-index: 4;
}


.bottom-goo.-green {
  background: #93C11A;
}
.bottom-goo.-red {
  background: #B00000;
}




.bottom-goo.-g-right {
  height: 2rem;
  left: 2.5rem;
  width: 4rem;
}
.bottom-goo.-g-left {
  border-bottom-left-radius: 4rem;
  height: 0.55rem;
  bottom: 6.25rem;
  left: 17rem;
  width: 7rem;
}
.bottom-goo.-r-middle {
  height: 1.5rem;
  left: 5.8rem;
  width: 3rem;
}
.bottom-goo.-r-line {
  border-bottom-left-radius: 4rem;
  border-bottom-right-radius: 4rem;
  height: 0.55rem;
  bottom: 6.25rem;
  left: 24.25rem;
  width: 5rem;
}

.goo-drip {
  border-bottom-left-radius: 1.5rem;
  border-bottom-right-radius: 1.5rem;
  position: absolute;
  width: 1.25rem;
  z-index: 4;
}
.goo-drip.-green {
  animation: drip-green 2s ease-in infinite;
  background: #93C11A;
  height: 1.5rem;
  left: 4.5rem;
}
.goo-drip.-red {
  background: #B00000;
}
.goo-drip.-right {
  height: 3.5rem;
  right: 2.5rem;
}
.goo-drip.-left {
  animation: drip-red 2s ease-in infinite;
  height: 2.5rem;
  right: 4.5rem;
}

.goo-drop {
  border-radius: 50%;
  position: absolute;
}
.goo-drop.-green {
  animation: drop 1.5s ease-in infinite;
  background: #93C11A;
  height: 1rem;
  top: 0rem;
  width: 1.2rem;
}
.goo-drop.-red {
  background: #B00000;
  height: 1.75rem;
  top: 4.5rem;
  right: 0;
  width: 1.2rem;
}
.goo-drop.-left {
  animation: drop 1.5s ease-in infinite;
  animation-delay: 2s;
  top: 0rem;
}

.bubble {
  animation: bubble-float 5s infinite, disappear 5s infinite;
  border-radius: 50%;
  position: absolute;
  top: 25rem;
  z-index: 3;
}
.bubble.-green {
  background: #93C11A;
  height: 1.5rem;
  left: 23rem;
  width: 1.5rem;
}
.bubble.-green-2 {
  animation-delay: 3.5s;
  background: #93C11A;
  height: 2.75rem;
  left: 24rem;
  width: 2.75rem;
}
.bubble.-yellow {
  animation-delay: 1s;
  background: #F9F806;
  height: 3rem;
  left: 24.5rem;
  width: 3rem;
}
.bubble.-red {
  animation-delay: 2s;
  background: #B00000;
  height: 2rem;
  left: 27.5rem;
  width: 2rem;
}

.lone-eye {
  background: #F6F3E0;
  border-radius: 50%;
  bottom: 6rem;
  height: 2rem;
  left: 13rem;
  position: absolute;
  transform: rotate(45deg);
  width: 2rem;
}
.lone-eye__color {
  background: #61CE61;
  border-radius: 50%;
  height: 1.25rem;
  left: 0.4rem;
  position: absolute;
  top: 0.35rem;
  width: 1.25rem;
}
.lone-eye__pupil {
  background: #2D4158;
  border-radius: 50%;
  height: 0.6rem;
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  width: 0.6rem;
}



@keyframes goo-bob {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.25rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes bubble-float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(1rem, -7rem);
  }
  100% {
    transform: translate(-0.75rem, -9rem);
  }
}
@keyframes disappear {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
@keyframes drip-green {
  50% {
    height: 1.75rem;
  }
  100% {
    height: 2.5rem;
  }
}
@keyframes drip-red {
  50% {
    height: 3rem;
  }
  100% {
    height: 4rem;
  }
}
@keyframes drop {
  25% {
    height: 1.75rem;
    transform: translateY(0.5rem);
  }
  75% {
    height: 1.5rem;
    transform: translateY(4rem);
  }
  100% {
    height: 1rem;
    transform: translateY(8rem);
  }
}