#preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  display: grid;
  align-items: center;
  justify-content: center;
  background: $light-white;
  z-index: 10000;
  
  .loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    svg {
      height: 300px;
      display: block;
      margin: 0 auto;
      path {
        animation-duration: 1s;
        animation-name: pulse;
        animation-iteration-count: infinite;
        color: $accent-1;

        &.path-7 {
          animation-delay: -1s
        }
        &.path-6 {
          animation-delay: -.875s
        }
        &.path-5 {
          animation-delay: -.75s
        }
        &.path-4 {
          animation-delay: -.625s
        }
        &.path-3 {
          animation-delay: -.5s
        }
        &.path-2 {
          animation-delay: -.375s
        }
        &.path-1 {
          animation-delay: -.25s
        }
        &.path-0 {
          animation-delay: -.125s
        }
      }
    }
  }
  
  @keyframes pulse {
    0%     { opacity: .1; }
    30%    { opacity: .8; }
    100%   { opacity: .1; }
  }
}