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

.bannerHome{
	background-image: url("../img/intro_octopus/octopus_bk.webp");
	background-size: cover;
	background-repeat: no-repeat;	
}

.intro-octopus-computer{
	position: absolute;
	left: 10vw;
	bottom: 12vh;
	width: 45vw;
	z-index: 2
}

.intro-octopus-computer .capa{
	position: absolute;
	left: 0;
	top: 0;
}

.intro-octopus-computer img{
	width: 100%;
}

.intro-octopus-computer .octopus{
	animation: animation-io-octopus 8s infinite;
	animation-delay: 1s;
}

.intro-octopus-computer .sombra{
	animation: animation-io-octopus-shadow 8s infinite;
	animation-delay: 1s;
}

.intro-octopus .bk-gradient,
.hero-intro .bk-gradient{
	position: absolute;
	width: 100%;
	height: 100%;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,ffffff+100&0.1+0,0.1+100 */
	background: linear-gradient(to right,  rgba(0,0,0,.6) 0%,rgba(0,0,0,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	z-index: 1;
	mix-blend-mode: overlay;
}


.intro-octopus .neurona{
	position: absolute;	
}

.intro-octopus .neurona img{
	width: 100%;
}

.intro-octopus .neurona-1{
	left: 60vw;
	width: 12vw;
	min-width: 150px;
	animation: animation-neuron-1 4s infinite;
}

.intro-octopus .neurona-2{
	left: -2vw;
	top: 5vw;
	width: 11vw;
	min-width: 120px;
	transform: rotate(80deg);
	animation: animation-neuron-1 8s infinite;
}

.intro-octopus .neurona-3{
	left: 20vw;
	bottom:-1vw;
	width: 6vw;
	min-width: 90px;
	transform: rotate(-45deg);
	animation: animation-neuron-1 6s infinite;
}

.intro-octopus .neurona-5{
	right: 0vw;
	bottom:15vw;
	width: 10vw;
	min-width: 120px;
	transform: rotate(45deg);
	animation: animation-neuron-1 5s infinite;
}


@keyframes animation-io-octopus{
	0%, 100%{
		transform: translate(0px,0px);
	}
	50%{
		transform: translate(0px,-40px);
	}
}


@keyframes animation-io-octopus-shadow{
	0%, 100%{
		opacity:1;
	}
	50%{
		opacity:.6;
	}
}

@keyframes animation-neuron-1 {
  0% {
    opacity:0.1;
    
  }
  
  2% {
    opacity:1;
   
  }
  8% {
    opacity:0.1;
    
  }
  9% {
    opacity:1;
   
  }
  12% {
    opacity:0.1;
  }
  20% {
    opacity:1;
  }
  25% {
    opacity:0.3;
  }
  30% {
    opacity:1;
  }
  
  70% {
    opacity:0.7;
  }
  
  72% {
    opacity:0.2;
  }
  
  77% {
    opacity:.9;
  }
  100% {
    opacity:.9;
  }
}

@media(max-width:1350px){
	.bannerHome .slogan .linea span,
	.hero-intro .slogan .linea span{
		font-size: 2.5em;
	}
}


@media(max-width:1150px){
	.bannerHome .slogan .linea span,
	.hero-intro .slogan .linea span{
		font-size: 2.2em !important;
	}
}

@media(max-width:750px){
	.bannerHome .slogan .linea span,
	.hero-intro .slogan .linea span{
		font-size: 2em !important;
		line-height: .5em;
	}
	
	.intro-octopus-computer{
		top: 30vh;
		bottom: unset;
		width: 90vw;
		left: 5vw;
	}

	.bannerHome .slogan,
	.hero-intro .slogan{
		border-right: solid 5px white;
	}
}