@keyframes fadeIn {
   0% { opacity: 0.2; }
   100% { opacity: 1; }
}

@keyframes resizeImage {
   0% {
      width: 97px;
      height: 64px;
   }
   100% {
      width: 133px;
      height: 88px;
   }
}

@keyframes slidein {
   0% {
      margin-left: -50%;
   }
   100% {
      margin-left: 150%;
   }
 }

@keyframes filler {
   0% {
      fill: #1A1B24;
   }
   100% {
      fill: #CE011F;
      fill-opacity: 1;
   }
}

html {
   height: 100%;
}

body {
   inset: 0px;
   overflow: hidden;
   padding: 0px;
   position: fixed;
   margin: 0px;
}

#loadingScreen {
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: center;
   align-items: center;
   z-index: 1;
   position: relative;
}

#loadingScreen.loaded {
   visibility: hidden;
   opacity: 0;
   transition-duration: 500ms;
   transition-property: opacity, visibility; 
   transition-delay: 500ms;
}

#kwImage {
   animation: resizeImage 2s forwards 0ms ease-in-out;
}

#kwImage>g {
   animation: fadeIn 2s forwards 300ms;
}

.kw-image-fill {
   animation: filler 50ms forwards;
}

#progressBarContainer {
   width: 190px;
   height: 8px;
   margin-top: 64px;
   position: relative;
   overflow: hidden;
}

#progressBar {
   position: absolute;
   border-radius: 4px;
   height: 8px;
   background-color: #3A3D50;
   opacity: 0.1;
   width: 100%;
}

#progressIndicator {
   position: relative;
   top: 0px;
   left: 0%;
   width: 35px;
   height: 7px;
   background-color: #000000;
   animation: slidein 1s linear 0s infinite running;
}

.hidden {
   visibility: hidden;
}