/* Banner variables */
:root {
  --banner-width: 100%;
  --banner-height: 100%;
  --border-color: #000;
}

#banner {
  overflow: hidden;
  background: #000
}

#banner,
#default_exit,
.border,
#background,
.lamb-container,
.fg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--banner-width);
  height: var(--banner-height);
  cursor: pointer;
}

#particles-js {
  opacity: 0.3;
  position: absolute;
  top: 0px;
  left: 0px;
  width: var(--banner-width);
  height: var(--banner-height);
  cursor: pointer;
}

.border {
  width: var(--banner-width) - 2;
  height: var(--banner-height) - 2;
  right: 0;
  bottom: 0;
  margin: auto;
  border: 1px solid var(--border-color);
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  /* -webkit-backface-visibility: hidden; */
  /* -ms-transform: translateZ(0); */
  /* IE 9 */
  /* -webkit-transform: translateZ(0); */
  /* Chrome, Safari, Opera */
  /* transform: translateZ(0); */
}

.flame,
.red-overlay {
  opacity: 1;
}

.fg {
  transform: scale(1.6);
}

.flame,
.flame-black,
.bg-characters,
.fg-characters,
.lamb,
.lamb-happy,
.logo,
.cta,
.cta-text1,
.cta-text2,
.cta-hover1,
.cta-hover2,
.platforms {
  transform: scale(0);
}

.flame-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  border-radius:50%;
  animation: glowing 1s ease-in-out infinite alternate;
  opacity: 0;
}

.flame,
.flame-black {
  top: auto;
  bottom: 0;
  left: -.75%;
}

.flame-black {
  left: 2px;
  bottom: 0px;
  opacity: 0;
}

.red-overlay {
  clip-path: circle(0% at 0% 0%);
}

@-webkit-keyframes glowing {
  from {
    box-shadow: 0 0 70px #fff, 0 0 80px #fff, 0 0 90px #c54345, 0 0 100px #fff, 0 0 110px #c54345, 0 0 120px #fff, 0 0 120px #c54345;
  }
  to {
    box-shadow: 0 0 80px #fff, 0 0 90px #c54345, 0 0 100px #c54345, 0 0 100px #c54345, 0 0 120px #c54345, 0 0 130px #c54345, 0 0 140px #c54345;
  }
}