/********* RIPPLE CONTAINERS ********/
.ripple-container-01, .ripple-container-02, .ripple-container-03, .ripple-container-04, 
.ripple-container-05, .ripple-container-06, .ripple-container-07, .ripple-container-08 {
    position: absolute;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    transform: translate(-50%, -50%);
    top: 0;
    left: 0;
}

/********* ACTUAL RIPPLES ********/
.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border: 3px solid yellow;
    border-radius: 50%;
    animation: ripple-effect 3s linear infinite;
}
  
.ripple:nth-child(2) {
    border-color: yellow;
    animation-delay: 1s;
    opacity:0.8;
}
  
.ripple:nth-child(3) {
    border-color: yellow;
    animation-delay: 2s;
    opacity:0.5;
}
  
@keyframes ripple-effect {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        width: 100px;
        height: 100px;
        opacity: 0;
    }
}

/********* HOVER ICON ********/
#icon-01, #icon-02, #icon-03, #icon-04,
#icon-05, #icon-06, #icon-07, #icon-08 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	cursor: pointer;
    width: 70px;
}

/********* TOOLTIP ********/
.tooltip-01, .tooltip-02, .tooltip-03, .tooltip-04,
.tooltip-05, .tooltip-06, .tooltip-07, .tooltip-08 {
    position: absolute;
    display: none;
    text-align: center;
    color: white;
    font-size: 20px;
    font-family: "Nunito Sans";
    background-color:rgba(255,255,255, 0.5);
    border-radius: 10px;
    padding: 0px 10px;
}