/*Page load animation.*/
.introtext{
	/* animation: intro-show 1s ease-in 0s 1; */
}
@keyframes intro-show{
	from{
		opacity: 0;
	}
	25%{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
nav.navbar{
	animation: nav-fadein 1.5s ease 0s 1;
}
@keyframes nav-fadein {
	from{
		opacity: 0;
	}
	35%{
		top:-72px; opacity: 0;
	}
	to{
		top:0; opacity: 1;
	}
}
.metric-wrapper .bubble-big{
	animation: bubble-big-show 2.2s ease 0s 1;
}
@keyframes bubble-big-show {
	from{
		transform: scale(0.6); opacity: 0;
	}
	50%{
		opacity: 0;
	}
	70%{
		opacity: 1;
	}
	to{
		transform: scale(1);
	}
}
.metric-wrapper .bubble-t{
	animation: bubble-t-show 2.3s ease-out 0s 1;										 
}
@keyframes bubble-t-show {
	from{
		top:-15%; opacity: 0;
	}
	50%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	to{
		top:-35%;
		/* transform: translateY(30%); */
	}
}
.metric-wrapper .bubble-tl{
	animation: bubble-tl-show 2.3s ease-out 0s 1;
}
@keyframes bubble-tl-show {
	from{
		left:-8%; top:22.5%; opacity: 0;
	}
	50%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	to{
		left:-25.5%; top:8%;
		/* transform: translate(-22.5%, 8%); */
	}
}
.metric-wrapper .bubble-tr{
	animation: bubble-tr-show 2.3s ease-out 0s 1;
}
@keyframes bubble-tr-show {
	from{
		right: -25%; opacity: 0;
	}
	50%{
		opacity: 0;
	}
	80%{
		opacity: 1;
	}
	to{
		right: -25%;
	}
}
.metric-wrapper .bubble-bl{
	animation: bubble-bl-show 2.8s ease-in 0s 1;
}
@keyframes bubble-bl-show {
	from{
								   
  
	 
		opacity: 0;
	}
	70%{
		opacity: 0; left:6%;
	}
	80%{
		opacity: 1;
	}
	to{
		left:-11%;
		/* transform: translateX(-11%); */
	}
}
.metric-wrapper .bubble-br{
	animation: bubble-br-show 2.8s ease-in 0s 1;
}
@keyframes bubble-br-show {
	from{
						  
  
	 
		opacity: 0;
	}
	70%{
		opacity: 0; left:60%;
	}
	80%{
		opacity: 1;
	}
	to{
		left:34%;
		/* transform: translateX(40%); */
	}
}
/****/

.home-intro .bg-animation{
	position:absolute;
	height:100%; width:100%;
	overflow:hidden;
	z-index: 1;
}
.home-intro .bg-animation i{
	position: absolute;
	width: 40vw;
	height: 40vw;
	border-radius: 50%;
	-webkit-animation: 'bubbles'  infinite;
	animation: 'bubbles'  infinite;
	border: 1px solid var(--weka-purple);
}
.home-intro .bg-animation i:nth-child(1){
	top:-20vw;
	left:-10vw;
	animation-duration: 8s;
}
.home-intro .bg-animation i:nth-child(2){
	top:-10vw;
	right:-10vw;
	animation-duration: 19s;
}
.home-intro .bg-animation i:nth-child(3){
	bottom:-25vw;
	left:-10vw;
	animation-duration: 13s;
}
.home-intro .bg-animation i:nth-child(4){
	bottom:-10vw;
	left:10vw;
	animation-duration: 17s;
}
.home-intro .bg-animation i:nth-child(5){
	top:14vw;
	right:10vw;
	animation-duration: 7s;
}
@keyframes bubbles{
	from {
	  opacity: 0;
	}
	25%{
	  opacity: 0.3;
	  transform: scale(1.3, 1.3);
	}
	50%{
	  opacity: 0.75;
	}
	75%{
	  opacity: 1;
	}
	to{
	  opacity: 0;
	}
}