.loading-overlay {
  &.is-full-page {
    .loading-background {
      background:rgba(0,0,0,0.85);
    }
  }
  .loading-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loading-tornado {
      &:after {
        content: '';
        display: block;
        height: 60px;
        width: 60px;
        background-image: url('../img/logo.svg');
        animation: spinAroundReverse 2000ms infinite linear;
      }
    }

    .loading-message {
      padding-top: .5rem;
      color: $primary;
      text-align: center;

      + .button {
        margin-top: .5rem;
      }
    }
    .loading-alert {
      padding-top: 1.5rem;
      color: $primary;
      font-size: 0.8rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      .button {
        margin-top: 1rem;
        font-size: 0.8rem;
      }
    }
  }
}

@keyframes spinAroundReverse {
  from {
    transform: rotate(359deg); }
  to {
    transform: rotate(0deg); }
}