.first-progress-indicator.available {
    opacity: 0;
    animation: fadeOut 0.5s ease-in-out;
}

.first-progress-indicator {
    background-color: white;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: 1;
    pointer-events: none;
    z-index: 9999;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-progress-logo {
    width: 80px;
    height: 80px;
    position: absolute;
    fill: white;
    z-index: 400;
}

.containerDotAnimation {
    width: 250px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    filter: url('#dotSvg');
    animation: rotate-move 3s ease-in-out infinite;
  }
  
  .dotAnimation { 
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #000;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

  .dotAnimationTitle {
    color: white;
    font-weight: 100;
    position: absolute;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 300;
  }
  
  .dot3Animation {
    background-color: #9ED7EF;
    animation: dot-3-move 2s ease infinite, index 6s ease infinite;
  }
  
  .dot2Animation {
    background-color: #8C5FE1;
    animation: dot-2-move 2s ease infinite, index 6s -4s ease infinite;
  }
  
  .dot1Animation {
    background-color: #FA9E89;
    animation: dot-1-move 2s ease infinite, index 6s -2s ease infinite;
  }

  @keyframes fadeLogo {
    0% { opacity: 1; }
    100% { opacity: 0 }
  }

  @keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0 }
  }
  
  @keyframes dot-3-move {
    20% {transform: scale(1)}
    45% {transform: translateY(-18px) scale(.45)}
    60% {transform: translateY(-90px) scale(.45)}
    80% {transform: translateY(-90px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes dot-2-move {
    20% {transform: scale(1)}
    45% {transform: translate(-16px, 12px) scale(.45)}
    60% {transform: translate(-80px, 60px) scale(.45)}
    80% {transform: translate(-80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes dot-1-move {
    20% {transform: scale(1)}
    45% {transform: translate(16px, 12px) scale(.45)}
    60% {transform: translate(80px, 60px) scale(.45)}
    80% {transform: translate(80px, 60px) scale(.45)}
    100% {transform: translateY(0px) scale(1)}
  }
  
  @keyframes rotate-move {
    55% {transform: translate(-50%, -50%) rotate(0deg)}
    80% {transform: translate(-50%, -50%) rotate(360deg)}
    100% {transform: translate(-50%, -50%) rotate(360deg)}
  }
  
  @keyframes index {
    0%, 100% {z-index: 3}
    33.3% {z-index: 2}
    66.6% {z-index: 1}
  }