html {
    height: calc(var(--vh, 1vh) * 100);
}
body {
    height: 100%;

}

.preloader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform: -webkit-translate(-50%, -50%);
    transform: -moz-translate(-50%, -50%);
    transform: -ms-translate(-50%, -50%);
    z-index: 99999;
}

.reveal {
    opacity: 0;
}


.loader {
    top: 40%;
}


/*THIS WORKS loader-spinning-slice4 spinning circle with dots*/
.loader-spinning-slice4 {
  width: 48px;
  height: 48px;
  border: 3px dotted #ffffff;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation-spinning-slice4 2s linear infinite;
}
.loader-spinning-slice4::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #FF3D00;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack-spinning-slice4 1s linear infinite;
  transform-origin: center center;
}
    
@keyframes rotation-spinning-slice4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack-spinning-slice4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
} 

/*THIS DOES NOT WORKS loader-ellipsis white */
.loader-ellipsis2 {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 32px 0 #fff, -32px 0 #fff;
  position: relative;
  animation: flash-ellipsis2 0.5s ease-out infinite alternate;
}

@keyframes flash-ellipsis2 {
  0% {
    background-color: #FFF2;
    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
  }
  50% {
    background-color: #FFF;
    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
  }
  100% {
    background-color: #FFF2;
    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
  }
}
      

 
/*THIS WORKS loader-ellipsis different colors */
.loader-ellipsis {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: block;
  margin:15px auto;
  position: relative;
  background: #FFF;
  box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  box-sizing: border-box;
  animation: shadowPulse-ellipsis 2s linear infinite;
}

@keyframes shadowPulse-ellipsis {
  33% {
    background: #FFF;
    box-shadow: -24px 0 #FFF2, 24px 0 #FFF;
  }
  66% {
    background: #FFF2;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF;
  }
  100% {
    background: #FFF;
    box-shadow: -24px 0 #FFF, 24px 0 #FFF2;
  }
}
      



/*THIS WORKS loader-spinning-slice spinning circle*/
.loader-spinning-slice {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation-spinning-slice 1s linear infinite;
}

@keyframes rotation-spinning-slice {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}





/*THIS WORKS loader-spinning-slice2 spinning circle in two lines*/
.loader-spinning-slice2{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  border-top: 4px solid #FFF;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  animation: rotation-spinning-slice2 1s linear infinite;
}
.loader-spinning-slice2::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border-bottom: 4px solid #FF3D00;
  border-left: 4px solid transparent;
}
@keyframes rotation-spinning-slice2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 



/*THIS WORKS loader-spinning-slice3 spinning circle in multiple lines*/
.loader-spinning-slice3 {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent transparent;
  box-sizing: border-box;
  animation: rotation-spinning-slice3 1s linear infinite;
}
.loader-spinning-slice3::after,
.loader-spinning-slice3::before {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent transparent #FF3D00 #FF3D00;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-sizing: border-box;
  animation: rotationBack-spinning-slice3 0.5s linear infinite;
  transform-origin: center center;
}
.loader-spinning-slice3::before {
  width: 32px;
  height: 32px;
  border-color: #FFF #FFF transparent transparent;
  animation: rotation-spinning-slice3 1.5s linear infinite;
}
    
@keyframes rotation-spinning-slice3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
@keyframes rotationBack-spinning-slice3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}





/*THIS WORKS loader-spinning-slice5 spinning circle smaller circle inside reverse direction*/
.loader-spinning-slice5{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  border: 3px solid;
  border-color: #FFF #FFF transparent;
  box-sizing: border-box;
  animation: rotation-spinning-slice5 1s linear infinite;
}
.loader-spinning-slice5::after {
  content: '';  
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px solid;
  border-color: transparent #FF3D00 #FF3D00;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack-spinning-slice5 0.5s linear infinite;
  transform-origin: center center;
}

@keyframes rotation-spinning-slice5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} 
    
@keyframes rotationBack-spinning-slice5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}




/*NOT WORKING loader-spinning-slice6 spinning circle smaller circle inside reverse direction stops and refreshes*/
.loader-spinning-slice6 {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: rotation-spinning-slice6 1s linear infinite
      }
      .loader-spinning-slice6::before , .loader-spinning-slice6::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #FFF;
        animation: prixClipFix-spinning-slice6 2s linear infinite ;
      }
      .loader-spinning-slice6::after{
        border-color: #FF3D00;
        animation: prixClipFix-spinning-slice6 2s linear infinite , rotate 0.5s linear infinite reverse;
        inset: 6px;
      }

      @keyframes rotation-spinning-slice6 {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix-spinning-slice6 {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
          75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
          100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
      }
    







/*stick and half moon*/
.loader {
  width: 64px;
  height: 64px;
  position: relative;
  animation: rotate 1.5s ease-in infinite alternate;
}
.loader::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  color: #FF3D00;
  background: currentColor;
  width: 64px;
  height: 32px;
  border-radius: 0 0 50px 50px;
}
.loader::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 10%;
  background: #FFF;
  width: 8px;
  height: 64px;
  animation: rotate 1.2s linear infinite alternate-reverse;
}

@keyframes rotate {
  100% { transform: rotate(360deg)}
}
      








/*Loaders From https://cssloaders.github.io/ */
.loader-pulsing-dot {
    width: 64px;
    height: 64px;
    position: relative;
    border-radius: 50%;
    box-shadow: -10px 8px 0 18px inset #fff;
    animation: rotate-pulsing-dot 2s ease-in infinite alternate;
}
.loader-pulsing-dot::before {
    content: '';
    position: absolute;
    left: 14px;
    bottom: 16px;
    background: #FF3D00;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    animation: scale-pulsing-dot 1s ease-in infinite alternate;
}
@keyframes rotate-pulsing-dot {
    100% { transform: rotate(750deg)}
}
@keyframes scale-pulsing-dot {
    100% { transform: scale(0.5) translateY(5px)}
}