.Anim {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    left: 0;
    opacity: 1;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: opacity .3s ease-out;
    width: 100%;
    z-index: 100;
}

.Anim figure {
    margin: auto 0;
}

.Anim figure .loader-container {
    height: 280px;
    position: relative;
    width: 280px;
}

.Anim figure .loader-container .spinner {
    -webkit-animation: spinsplash 1.5s infinite;
    animation: spinsplash 1.5s infinite;
    border: 9px solid #e6e5e5;
    border-radius: 50%;
    border-top-color: var(--base-color, #005686);
    height: 280px;
    position: relative;
    transform: rotate(45deg);
    transition: border-color .3s ease-out;
    width: 280px;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.Anim figure .loader-container .spinner:after,
.Anim figure .loader-container .spinner:before {
    background: var(--base-color, #005686);
    border-radius: 50%;
    content: "";
    height: 9px;
    position: absolute;
    top: 31px;
    transition: background-color .3s ease-out;
    width: 9px;
}

.Anim figure .loader-container .spinner:before {
    left: 31px;
}

.Anim figure .loader-container .spinner:after {
    left: 223px;
}


@-webkit-keyframes spinsplash {
    0% {
        transform: rotate(45deg)
    }

    to {
        transform: rotate(405deg)
    }
}

@keyframes spinsplash {
    0% {
        transform: rotate(45deg)
    }

    to {
        transform: rotate(405deg)
    }
}


/*

  .Anim {
      position: absolute;
      z-index: -1;
      top: 42vh;
      left: 46vw;
  }

  .SpiLoadingLogo {
    position: absolute;
      background-image: url(../images/loader_smo_small.gif);
      background-image: url(../images/loader_smo.gif);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 75px;
      height: 75px;
  }

  /*


  .Anim {
      position: absolute;
      z-index: -1;
      top: 42vh;
      left: 46vw;
  }

  .SpiLoadingLogo {
    position: absolute;
      background-image: url(../images/loader_spi_1.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 75px;
      height: 75px;
    animation: backandhit 2s linear infinite;
  }

  .SpiLoadingLogo.Full {
      background-image: url(../images/loader_spi_4.png);
      opacity: 0;
      animation: logopop 2s linear infinite;
  }

  .LoadingLogo1 {
      position: absolute;
      z-index: -3;
      background-image: url(../images/loader_spi_3.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 75px;
      height: 75px;   
  }

  .LoadingLogo2 {
      position: absolute;
      z-index: -3;
      background-image: url(../images/loader_spi_2.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      width: 75px;
      height: 75px;
  
  }

  .TriangleTop {
    animation: tophit 2s linear infinite;
  }
  .TriangleTopLeft {
    animation: toplefthit 2s linear infinite;
  }
  .TriangleBottomLeft {
    //transform: rotate(300deg);
      transform: scale(1, -1);
    animation: botlefthit 2s linear infinite;
  }
  .TriangleBottom {
      transform: transform: scale(1, -1);
    animation: bothit 2s linear infinite;
  }

  @keyframes backandhit {
    0% {opacity: 1;}
    24% {transform: translate(50px);}
    26% {transform: translate(0px);}
    28% {transform: translate(-20px);}
    30% {transform: translate(0px);}
    32% {transform: translate(10px);}
    50% {transform: translate(0px);}
    98% {opacity: 1;}
    100% {opacity: 0;}
    
  }

  @keyframes tophit {
    0% {opacity: 1;transform: translate(0px);}
    26% {transform: translate(0px);}
    32% {transform: translate(0px, -100px);}
    85% {opacity: 1;transform: translate(0px)}
    86% {opacity: 0;}
    100% {opacity: 0;transform: translate(0px)}  
    
  }
  @keyframes bothit {
    0% {opacity: 1;transform: scale(1, -1) translate(0px);}
    26% {transform:scale(1, -1) translate(0px);}
    32% {transform: scale(1, -1) translate(0px, -100px);}
    85% {opacity: 1;transform: scale(1, -1) translate(0px);}  
    86% {opacity: 0;}
    100% {opacity: 0;transform: scale(1, -1) translate(0px);}  
  }
  @keyframes toplefthit {
    0% {opacity: 1;transform: translate(0px);}
    26% {transform: translate(0px);}
    32% {transform: translate(-100px, -40px);}
    85% {opacity: 1;transform: translate(0px);}  
    86% {opacity: 0;}
    100% {opacity: 0;transform: translate(0px);}  
  }
  @keyframes botlefthit {
    0% {opacity: 1;transform: scale(1, -1) translate(0px);}
    26% {transform: scale(1, -1) translate(0px);}  
    32% {transform: scale(1, -1) translate(-100px, -40px);}
    85% {opacity: 1;transform:  scale(1, -1) translate(0px);}  
    86% {opacity: 0;}
    100% {opacity: 0;transform:  scale(1, -1) translate(0px);}  
  }
  @keyframes logopop {
    0% {opacity: 0;}
    26% {opacity: 0;}
    32% {opacity: 0;}
    85% {opacity: 0;}
    86% {opacity: 1;}
    100% {opacity: 1;}
  }

*/