#bootscreen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: 300ms opacity ease-out;
    transition-delay: 400ms;
    cursor: none;
    z-index: 9999;

    /* display: none; */ /* Temporary, disabled for development */
}

#bootscreen .logo,
#bootscreen .loader {
    opacity: 0;
    pointer-events: none;
    transition: 500ms opacity ease-in;
}

#bootscreen.is-active,
#bootscreen.is-active .logo,
#bootscreen.is-active .loader {
    opacity: 1;
    pointer-events: all;
}

#bootscreen .logo {
    margin-bottom: 250px;
}

#bootscreen .logo #windows {
    /* color: #0078d7; */
    width: 120px;
}
#bootscreen .loader {
    width: 50px;
    height: 50px;
    transform: scale(0.8);
}
#bootscreen .loader .circle {
    position: absolute;
    width: 38px;
    height: 38px;
    opacity: 0;
    transform: rotate(225deg);
    animation-iteration-count: infinite;
    animation-name: bootAnim;
    animation-duration: 4.8s;
}
#bootscreen .loader .circle:after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    border: 1px white solid;
    box-shadow: 0 0 1px #0078d7;
}
#bootscreen .loader .circle:nth-child(2) {
    animation-delay: 240ms;
}
#bootscreen .loader .circle:nth-child(3) {
    animation-delay: 480ms;
}
#bootscreen .loader .circle:nth-child(4) {
    animation-delay: 720ms;
}
#bootscreen .loader .circle:nth-child(5) {
    animation-delay: 960ms;
}
@keyframes bootAnim {
    0% {
      transform: rotate(225deg);
      opacity: 1;
      animation-timing-function: ease-out;
    }
    7% {
      transform: rotate(345deg);
      animation-timing-function: linear;
    }
    30% {
      transform: rotate(455deg);
      animation-timing-function: ease-in-out;
    }
    39% {
      transform: rotate(690deg);
      animation-timing-function: linear;
    }
    70% {
      transform: rotate(815deg);
      opacity: 1;
      animation-timing-function: ease-out;
    }
    75% {
      transform: rotate(945deg);
      animation-timing-function: ease-out;
    }
    76% {
      transform: rotate(945deg);
      opacity: 0;
    }
    100% {
      transform: rotate(945deg);
      opacity: 0;
    }
}