/*  This is just to center the spinner */
.the4-loading.the4-active{
    opacity: 1;
    z-index: 9999999;
}
.the4-loading{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background-color:rgb(0 0 0 / 46%);
    width:100%;
    height:100%;
    z-index: -1;
    opacity: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
      -ms-flex-line-pack: center;
          align-content: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    
  }
  .the4-spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
     
  }
  
  @-webkit-keyframes rotator {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); }
  }
  @keyframes rotator {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); ;}
  }
  
  .the4-path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite,  colors 5.6s ease-in-out infinite; 
    animation: dash 1.4s ease-in-out infinite,  colors 5.6s ease-in-out infinite; 
  }
  
  @-webkit-keyframes colors {
      0% { stroke: #f04e23; }
      45% { stroke: #58595b; }
      50% { stroke: #80c342; }
      75% { stroke: #5bc4bf; }
    100% { stroke: #fdb913; }
  }
  @keyframes colors {
    0% { stroke: #f04e23; }
    45% { stroke: #58595b; }
    50% { stroke: #80c342; }
    75% { stroke: #5bc4bf; }
  100% { stroke: #fdb913; }
}
  
  @-webkit-keyframes dash {
   0% { stroke-dashoffset: 187; }
   50% {
     stroke-dashoffset: 46; 
     -webkit-transform:rotate(135deg);
     transform: rotate(135deg);
   }
   100% {
     stroke-dashoffset: 187;
     -webkit-transform:rotate(450deg);
     transform:rotate(450deg);
   }
  }
  @keyframes dash {
    0% { stroke-dashoffset: 187; }
    50% {
      stroke-dashoffset: 46; 
      -webkit-transform:rotate(135deg);
      transform:rotate(135deg);
    }
    100% {
      stroke-dashoffset: 187;
      -webkit-transform:rotate(450deg);
      transform:rotate(450deg);
    }
   }