/*BUBBLE*/
.ball {
    opacity: 0;
    transition: opacity 0.5s ease;
    display: inline-block;
    width:20vmin;
    height: 20vmin;
    border-radius: 100%;
    position: relative;
    background: radial-gradient(circle at bottom, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
    background-repeat: no-repeat !important;
    background-size: auto 100% !important; }
    .ball:before {
      content: "";
      position: absolute;
      top: 1%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 100%;
      background: radial-gradient(circle at top, white, rgba(255, 255, 255, 0) 58%);
      -webkit-filter: blur(5px);
      filter: blur(5px);
      z-index: 2; }
    .ball:after {
      content: "";
      position: absolute;
      display: none;
      top: 5%;
      left: 10%;
      width: 80%;
      height: 80%;
      border-radius: 100%;
      -webkit-filter: blur(1px);
      filter: blur(1px);
      z-index: 2;
      -webkit-transform: rotateZ(-30deg);
      transform: rotateZ(-30deg); 
    } 
    .ball .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
      -webkit-transform: rotateX(90deg) translateZ(-160px);
      transform: rotateX(90deg) translateZ(-160px);
      z-index: 1; }
    .ball.plain {
      background: black; }
      .ball.plain:before, .ball.plain:after {
        display: none; }
      .jumping_buble{
        -webkit-animation: bubble-anim 2s ease-out infinite;
      animation: bubble-anim 2s ease-out infinite;
      }
    .ball.bubble {
      background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), rgba(240, 245, 255, 0.9) 40%, rgba(225, 238, 255, 0.8) 60%, rgba(43, 130, 255, 0.4));
     }
      .ball.bubble:before {
        -webkit-filter: blur(0);
        filter: blur(0);
        height: 80%;
        width: 40%;
        background: radial-gradient(circle at 130% 130%, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 58%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
        -webkit-transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg);
        transform: translateX(131%) translateY(58%) rotateZ(168deg) rotateX(10deg); 
       }
      .ball.bubble:after {
        display: block;
        background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%); }
.ball.visible{
  opacity: 1;
}
 /*BUBBLE ANIMATION*/
  @-webkit-keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.97) scaleX(1.02);
      transform: scaleY(0.97) scaleX(1.02); }
  
    48% {
      -webkit-transform: scaleY(1.07) scaleX(0.9);
      transform: scaleY(1.07) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.99) scaleX(1.01);
      transform: scaleY(0.99) scaleX(1.01); }
  
    80% {
      -webkit-transform: scaleY(1.01) scaleX(0.99);
      transform: scaleY(1.01) scaleX(0.99); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1); } }
  
  @keyframes bubble-anim {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1); }
  
    20% {
      -webkit-transform: scaleY(0.98) scaleX(1.05);
      transform: scaleY(0.98) scaleX(1.05); }
  
    48% {
      -webkit-transform: scaleY(1.07) scaleX(0.9);
      transform: scaleY(1.07) scaleX(0.9); }
  
    68% {
      -webkit-transform: scaleY(0.99) scaleX(1.02);
      transform: scaleY(0.99) scaleX(1.02); }
  
    80% {
      -webkit-transform: scaleY(1.01) scaleX(0.98);
      transform: scaleY(1.01) scaleX(0.98); }
  
    97%, 100% {
      -webkit-transform: scale(1);
      transform: scale(1);} }

  /*BUBBLE HOVER ANIMATION*/
  @-webkit-keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }
  @keyframes tilt-shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0eg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
  }
  .bubbleHover{
    animation: tilt-shaking 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation-iteration-count: infinite;
  }