/*--------------------------------------------------------------
 * Preloader CSS MS
 *--------------------------------------------------------------
 */

.wp-smart-loader {
    text-indent: -12345px;
}

/*--------------------------------------------------------------
 * Preloader One
 *--------------------------------------------------------------
 */

.smart-loader-one  {
    width: 50px;
    height: 50px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 1px solid rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    -moz-animation: spinner 700ms infinite linear;
    -ms-animation: spinner 700ms infinite linear;
    -o-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
 * Preloader Two
 *--------------------------------------------------------------
 */


.smart-loader-two {
    width: 15px;
    aspect-ratio: 1;
    border-radius: 50%;
    animation: l5 1s infinite linear alternate;
  }
  @keyframes l5 {
      0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
      33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
      66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
      100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
  }
/*--------------------------------------------------------------
 * Preloader Three
 *--------------------------------------------------------------
 */

.smart-loader-three {
    position: relative;
}

.smart-loader-three span {
    display: block;
    bottom: 0px;
    width: 9px;
    height: 5px;
    background: #9b59b6;
    position: absolute;
    -webkit-animation: spinner-three 1.5s infinite ease-in-out;
    animation: spinner-three 1.5s infinite ease-in-out;
}

.smart-loader-three span:nth-child(2) {
    left: 11px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.smart-loader-three span:nth-child(3) {
    left: 22px;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.smart-loader-three span:nth-child(4) {
    left: 33px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.smart-loader-three span:nth-child(5) {
    left: 44px;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

@-webkit-keyframes spinner-three {
    0% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
    25% {
        height: 30px;
        transform: translateY(15px);
        background: #3498db;
    }
    50% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
    100% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
}

@keyframes spinner-three {
    0% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
    25% {
        height: 30px;
        transform: translateY(15px);
        background: #3498db;
    }
    50% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
    100% {
        height: 5px;
        transform: translateY(0px);
        background: #9b59b6;
    }
}

/*--------------------------------------------------------------
 * Preloader Four
 *--------------------------------------------------------------
 */

.smart-loader-four {
    width: 80px;
    height: 80px;
}

.smart-loader-four .spinner-cube {
    width: 33%;
    height: 33%;
    background-color: #9b59b6;
    float: left;
    -webkit-animation: spinner-four 1.3s infinite ease-in-out;
    animation: spinner-four 1.3s infinite ease-in-out;
}

.smart-loader-four .spinner-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.smart-loader-four .spinner-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.smart-loader-four .spinner-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.smart-loader-four .spinner-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.smart-loader-four .spinner-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.smart-loader-four .spinner-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
}

.smart-loader-four .spinner-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.smart-loader-four .spinner-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
}

.smart-loader-four .spinner-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

@-webkit-keyframes spinner-four {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

@keyframes spinner-four {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
    }
}

/*--------------------------------------------------------------
 * Preloader Five
 *--------------------------------------------------------------
 */
.smart-loader-five  {
    width: 60px;
    aspect-ratio: 1;
    display: flex;
    color: #000;
    border: 4px solid;
    box-sizing: border-box;
    border-radius: 50%;
    background: 
      radial-gradient(circle 5px, currentColor 95%,#0000),
      linear-gradient(currentColor 50%,#0000 0) 50%/4px 60% no-repeat;
    animation: l1 2s infinite linear;
  }
  .smart-loader-five:before {
    content: "";
    flex: 1;
    background:linear-gradient(currentColor 50%,#0000 0) 50%/4px 80% no-repeat;
    animation: inherit;
  }
  @keyframes l1 {
    100% {transform: rotate(1turn)}
  }
/*--------------------------------------------------------------
 * Preloader Six
 *--------------------------------------------------------------
 */
.smart-loader-six {
    --s: 25px;
    --g :5px;  
    
    width: calc(2*(1.353*var(--s) + var(--g)));
    aspect-ratio: 1;
    background:
      linear-gradient(#ff1818 0 0) left/50% 100% no-repeat,
      conic-gradient(from -90deg at var(--s) calc(0.353*var(--s)),
        #fff 135deg,#666 0 270deg,#aaa 0); 
    background-blend-mode: multiply;
    --_m:
      linear-gradient(to bottom right,
         #0000 calc(0.25*var(--s)),#000 0 calc(100% - calc(0.25*var(--s)) - 1.414*var(--g)),#0000 0),
      conic-gradient(from -90deg at right var(--g) bottom var(--g),#000 90deg,#0000 0);
    -webkit-mask: var(--_m);
            mask: var(--_m);
    background-size:   50% 50%;
    -webkit-mask-size: 50% 50%;
            mask-size: 50% 50%;
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
    animation: l9 1.5s infinite;
  }
  @keyframes l9 {
    0%,12.5%    {background-position:0% 0%,0 0}
    12.6%,37.5% {background-position:100% 0%,0 0}
    37.6%,62.5% {background-position:100% 100%,0 0}
    62.6%,87.5% {background-position:0% 100%,0 0}
    87.6%,100%  {background-position:0% 0%,0 0}
  }
/*--------------------------------------------------------------
 * Preloader Seven
 *--------------------------------------------------------------
 */
.smart-loader-seven {
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    display: grid;
    background: #fff;
    filter: blur(4px) contrast(10) hue-rotate(240deg);
    mix-blend-mode: darken;
  }
  .smart-loader-seven:before{
    content: "";
    grid-area: 1/1;
    margin: 30px 0;
    border-radius: 100px;
    background: #00ffff;
  }
  .smart-loader-seven:after {
    content: "";
    grid-area: 1/1;
    height: 35px;
    width: 35px;
    margin: auto;
    border-radius: 50%;
    background: #00ffff;
    animation: l5 2s infinite linear;
  }
  @keyframes l5{
    0%   {transform: translate(30px)}
    25%  {transform: translate(0)}
    50%  {transform: translate(-30px)}
    75%  {transform: translate(0)}
    100% {transform: translate(30px)}
  }

 /*--------------------------------------------------------------
 * Preloader Seven
 *--------------------------------------------------------------
 */
 /*--------------------------------------------------------------
 * Preloader eight
 *--------------------------------------------------------------
 */

.smart-loader-eight {
    width: 120px;
    height: 20px;
    border-radius: 20px;
    background:
     repeating-linear-gradient(135deg,#f03355 0 10px,#ffa516 0 20px) 0/0%   no-repeat,
     repeating-linear-gradient(135deg,#ddd    0 10px,#eee    0 20px) 0/100%;
    animation: l3 2s infinite;
  }
  @keyframes l3 {
      100% {background-size:100%}
  }

 /*--------------------------------------------------------------
 * Preloader eight
 *--------------------------------------------------------------
 */
 /*--------------------------------------------------------------
 * Preloader nine
 *--------------------------------------------------------------
 */
.smart-loader-nine {    
    --r1: 154%;
    --r2: 68.5%;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%; 
    background:
      radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
      radial-gradient(var(--r1) var(--r2) at bottom,#269af2 79.5%,#0000 80%),
      radial-gradient(var(--r1) var(--r2) at top   ,#0000 79.5%,#269af2 80%),
      #ccc;
    background-size: 50.5% 220%;
    background-position: -100% 0%,0% 0%,100% 0%;
    background-repeat:no-repeat;
    animation: l9 2s infinite linear;
  }
  @keyframes l9 {
      33%  {background-position:    0% 33% ,100% 33% ,200% 33% }
      66%  {background-position: -100%  66%,0%   66% ,100% 66% }
      100% {background-position:    0% 100%,100% 100%,200% 100%}
  }


 /*--------------------------------------------------------------
 * Preloader nine
 *--------------------------------------------------------------
 */
 /*--------------------------------------------------------------
 * Preloader ten
 *--------------------------------------------------------------
 */

.smart-loader-ten {
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f03355;
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    animation: l1 2s infinite cubic-bezier(0.3,1,0,1);
  }
  @keyframes l1 {
    33% {border-radius: 0;background: #514b82 ;clip-path: polygon(0 0,100% 0,100% 100%,0 100%)}
    66% {border-radius: 0;background: #ffa516 ;clip-path: polygon(50% 0,50% 0,100% 100%,0 100%)}
  }

  /*--------------------------------------------------------------
 * Preloader ten
 *--------------------------------------------------------------
 */