/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 08 2023 | 17:01:14 */
section.contenedor_bannerPrincipal{position:relative !important;}

section.contenedor_bannerPrincipal .columna_padre{
   position:absolute;
   top:0px;
   left:0;
   width:100%;
   height:100%;
   overflow:hidden !important;
   z-index:99;
   background:#101011
}


section.bannerPrincipal{
    background-position:center;
	background-size:40%;
	background-repeat:repeat; 
    position:sticky;
    top:0px;
    left:0;
    width:100%;
    height:100%;
    transition:.2s;
    clip-path:  circle(75px at var(--x) var(--y)); 
    overflow:auto;
    z-index:90;
    filter: grayscale(100);
}

/* section.bannerPrincipal.activo{
	opacity:1
} */

section.bannerPrincipal:active{
   clip-path:  circle(200px at var(--x) var(--y));
}

.titulo_bannerPrincipal{
    position:absolute;
    top:40%;
	z-index:1;
    pointer-events:none;
    user-select:none;
}
@media(max-width:667px){
	.titulo_bannerPrincipal {
		position: absolute;
		top: 20%;
	}
}

/* ------------------- Animacion de entrada ------------------- */
/* body.animacion_entrada--activo .titulo_bannerPrincipal {
  opacity: 0;
  animation-duration: .3s;
  animation-fill-mode: forwards;
}

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_2 {
  animation-name: fadeInOut;
  animation-delay: 2s;
  animation-duration: 14s;
}

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_3 {
  animation-name: fadeInOut;
  animation-delay: 15s;
  animation-duration: 16s;
}

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_4 {
  animation-name: fadeInOut;
  animation-delay: 31s;
  animation-duration: 16s;
}

@keyframes fadeInOut {
 0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
 */
body.animacion_entrada--activo .titulo_bannerPrincipal {
  opacity: 0;
}

/* body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_1 {
  animation-name: fadeInOut;
  animation-duration: 3s;
  animation-fill-mode: forwards;
} */

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_2 {
  animation-name: fadeInOut;
  animation-delay: 0s;
  animation-duration: 12s;
  animation-fill-mode: forwards;
}

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_3 {
   animation-name: fadeInOut;
  animation-delay: 12s;
  animation-duration: 16s;
  animation-fill-mode: forwards;
}

body.animacion_entrada--activo .titulo_bannerPrincipal.titulo_4 {
  animation-name: fadeInOut;
  animation-delay: 28s;
  animation-duration: 14s;
  animation-fill-mode: forwards;
}

@keyframes fadeInOut {
 0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


/*--------------Fin*/


/*------------------------ circulos*/
.circulo {
  position: fixed;
  height: 150px;
  width: 150px;
  z-index: 90;
  border-radius: 50%;
  top: var(--y);
  left: var(--x);
  transition: all ease .5s;
  transform: translate(-64px, -17px);
}

.circulo.circulo2{background: red;transition: all ease .3s;z-index: 89;width: 130px;height: 130px;margin: -50px 10px;}
.circulo.circulo3{background: #ccc;transition: all ease .4s;z-index: 88;width: 110px;height: 110px;margin: -25px -0px;}

.circulo.circulo4{background: green;transition: all ease .5s;z-index: 87;width: 90px;height: 90px;margin: -20px 10px;}

.circulo.circulo5{background: yellow;transition: all ease .6s;z-index: 86;width: 80px;height: 80px;margin: 3px 5px;}

.circulo.circulo6{background: pink;transition: all ease .7s;z-index: 85;width: 70px;height: 70px;margin: 0px 4px;}

.circulo.circulo7{background: purple;transition: all ease .8s;z-index: 84;width: 60px;height: 60px;margin: 0px 3px}