/* Goal widget (heart) — adapted from StreamLabs v1.3.0 for iframe embedding */
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-display: swap;
  src: url('assets/poppins-700.woff2') format('woff2');
}

/* 14px bold on screen whatever the iframe size: #stage is scaled by --scale (index.html). */
#goal-title, #goal-counter {
  font-size: calc(14px / var(--scale, 1));
  font-weight: 700;
}

/* 10px between the heart and the texts on screen (adds to the positioning transform set by widget.js). */
#texts {
  translate: 0 calc(10px / var(--scale, 1));
}

#everything {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2000px; 
    height: 1000px; 
  
}

#complete-orb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%; 
  

}

#glass-container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -55%);
  
  	width: 100%; 
    height: 100%;
  
    z-index: 1;


}

#over-glass{
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%;


}

#glass {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
  
  	width: 100%; 
    height: 100%;
  
    z-index: 1;

}



#bg-container {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
  
  	width: 100%; 
    height: 100%;
  
    z-index: -99;
}

#liquid-container {
	position: absolute; 
    /*top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);*/
    width: 100%; 
    height: 100%;
  overflow: visible;

}

#over-liquid{
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%;
  overflow: visible;
  
}

#liquid{
  	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%;
  	overflow: visible;
  
  	
}

#wave, #wave-back {
  will-change: transform;
  overflow: visible;
}

#wave {
	position: absolute;
    top: 75%; 
    left: 50%; 
    width: 100%;
    height: 100%;
  	z-index: 1;
    transform: translate(-50%, -50%) scaleX(1.5);
  
   	opacity: 0;
  	-webkit-mask-image: url('assets/wave-mask.png'); /* For WebKit browsers */
  	mask-image: url('assets/wave-mask.png'); /* For other browsers */
  	mask-repeat: no-repeat;
  	mask-size: contain;
	display: inline-block;
  
    animation: waveRight 5s linear 0s infinite;
  
}

#wave-back {
	position: absolute;
    top: 74%; 
    left: 50%; 
    width: 100%;
    height: 100%;
  	z-index: 0;
    transform: translate(-50%, -50%) scaleX(1.5);
  
  	opacity: 0;
  	-webkit-mask-image: url('assets/wave-mask.png'); /* For WebKit browsers */
  	mask-image: url('assets/wave-mask.png'); /* For other browsers */
  	mask-repeat: no-repeat;
  	mask-size: contain;
	display: inline-block;
    
  	animation: waveLeft 5s linear 0s infinite;
  
}

#texts {
  
	position: absolute; 
  	top: 50%;
    left: 50%; 
  	transform: translate(-50%, -50%);
  	height: 100%;
  	width: 100%;
  	text-align: center;
  
}

#goal-title {
  
  	opacity: 0;
  
  	position: absolute; 
    left: 50%; 
  	transform: translate(-50%, 0%);
  	height: 50%;
  	top: 50%;
  	display: grid;
  	align-items: center;
  
  	width: 100%;
  	
  	
}

#goal-counter { 
  
  	display: grid;
  	align-items: center;
 
 
  	width: 100%; 
  	opacity: 0;
  
  	position: absolute; 
    left: 50%; 
  	transform: translate(-50%, 18%);
  	height: 50%;
  	top: calc(46% + (var(--title-size, 73) - 36) * 0.05%); /* --title-size: set from CONFIG.titleSize in index.html */
  	
}

#video-div-reach{
  	opacity: 1;
    position: absolute; 
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -60%) scale(0.8); 
  
  	width: 100%; 
    height: 100%;
  
    z-index: 5; 
  

}

#video-div-event{
  
  	opacity: 1;
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -60%) scale(0.8); 
  
  	width: 100%;
    height: 100%;
  
    z-index: 6; 
  

}

#on-event-video{
  
  	opacity: 0;
  
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  
  	width: 100%; 
    height: 100%;
    	
}

#reach-video{
  
  	opacity: 1;
  
	position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
  
  	width: 100%; 
    height: 100%;
  
  	
}

/*==================================================================*/

@keyframes float {
  
   0% {
  	top: 49% ;
  }
  
  50% {
  	top: 51%;
  }
  
  100% {
  	top: 49%;
  }

}

@keyframes waveRight {
  
   0% {
  	left: 25% ;
  }
  
  100% {
  	left: 100%;
  }
  
}

@keyframes waveLeft {
  
   0% {
  	left: 90% ;
  }
  
  100% {
  	left: 15%;
  }
  
}