#splashScreen{
    position:fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .loader{ text-align: center; }
  .loading-bar{
    position: relative;
    width: 168px;
    height: 8px;
  }
  .loading-bar .bar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    animation: barWidth infinite 4.25s ease;
  }
  .loading-bar .bar-top{
    right: calc(168px - 8px);
    background-color: #1AAAA2;
    animation-delay: -.1s;
  }
  .loading-bar .bar-mid{
    right: calc(168px - 8px);
    background-color: #2f6479;
    animation-delay: .15s;
  }
  .loading-bar .bar-bottom{
    right: calc(168px - 8px);
    background-color: #F9CA32;
    animation-delay: .5s;
  }
  .loader img{
    width: 96px;
    margin-bottom: 24px;
  }
  @keyframes barWidth{
    0%{
      left: 0;
      right: calc(168px - 8px);
    }
    20%{
      left: 0;
      right: 0;
      /* transform: translateX(0); */
    }
    40%{
      left: calc(168px - 8px);
      right: 0;
      /* transform: translateX(calc(100% - 8px)); */
    }
    80%{
      left: 0;
      right: 0;
    }
    100%{
      left: 0;
      right: calc(168px - 8px);
    }
  }
  #splashScreen.loaded {
    opacity: 0;
    visibility: hidden;
}