.nav-bubble {
  position: absolute;
  top: 46%;
  transform: translateY(-50%);
  background: white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0px 12px rgba(0,0,0,0.2);
  z-index: 3;
  border: 2px solid #f1f1f1;
  transition: transform 200ms , opacity .3s ease;;
}

.nav-bubble:hover {
  transform: translateY(-50%) scale(1.1);

}


.nav-bubble.hidden-bub {
  opacity: 0;
  pointer-events: none; /* so you can’t click invisible bubbles */
}


.nav-bubble svg {
  width: 35px;
  height: 35px;
  margin: 10px;
}



/* Left bubble: halfway out */
.nav-left {
  left: -40px;  /* adjust so it "hangs out" halfway */
  justify-content: right;

}

/* Right bubble: halfway out */
.nav-right {
  right: -40px;
  justify-content: left;
  
}