body .swm-loader-holder { position:fixed; width:100%; height:100%; display:block; z-index:999999; top:0; left:0;
    --swm-loader-color-dark: var(--swm-color-dark-1);
    --swm-loader-color-body:var(--swm-color-body);
    --swm-loader-color-light:var(--swm-color-light-1);
    background:var(--swm-loader-color-body); }

body.swm-page-preloader-dark .swm-loader-holder {
    --swm-loader-color-dark: var(--swm-color-light-1);
    --swm-loader-color-body: var(--swm-color-dark-1);
    --swm-loader-color-light: var(--swm-color-dark-1);
    background: var(--swm-color-dark-1);
}

.swm-loader-inner { top: 50%; left: 50%; transform: translate(-50%, -50%); position:absolute; }

/* Circular Spinner */
.swm-circular-spin { height: 60px; width: 60px; -webkit-animation: swm-circular-spin 1s infinite linear; -moz-animation: swm-circular-spin 1s infinite linear; -o-animation: swm-circular-spin 1s infinite linear; animation: swm-circular-spin 1s infinite linear; border: 3px solid rgba(0, 0, 0, 0.2); border-radius: 100%; }

body.swm-page-preloader-dark .swm-circular-spin { border-color:rgba(255, 255, 255, 0.2); }

.swm-circular-spin:before { content: ""; display: block; position: absolute; left: -3px; top: -3px; height: 100%; width: 100%; border-top: 3px solid var(--swm-loader-color-dark); border-left: 3px solid transparent; border-bottom: 3px solid transparent; border-right: 3px solid transparent; border-radius: 100%; box-sizing: content-box; }

@keyframes swm-circular-spin { from {transform: rotate(0deg); } to {transform: rotate(359deg); } }

/* Kinetex Network */
.swm-kinetex-network { width: 40px; height: 40px; margin-top:10px; }
.swm-kinetex-network .swm-kn-loader-center { width: 40px; height: 40px; background: var(--swm-loader-color-dark); border-radius: 50%; animation: swm-kn-loader-center 3.2s ease-in-out infinite; }
.swm-kinetex-network li:not(.swm-kn-loader-center) { position: absolute; width: 10px; height: 10px; top: 25px; left: 0; right: 0; margin: auto; background: var(--swm-loader-color-dark); border-radius: 50%;  }

@keyframes swm-kn-loader-c-1 { 0%, 60%, 100% { transform: rotate(45deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(45deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-2 { 0%, 60%, 100% { transform: rotate(90deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(90deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-3 { 0%, 60%, 100% { transform: rotate(135deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(135deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-4 { 0%, 60%, 100% { transform: rotate(180deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(180deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-5 { 0%, 60%, 100% { transform: rotate(225deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(225deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-6 { 0%, 60%, 100% { transform: rotate(270deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(270deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-7 { 0%, 60%, 100% { transform: rotate(315deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(315deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-c-8 { 0%, 60%, 100% { transform: rotate(360deg) translateX(40px) scale(1); } 10%, 50% { transform: rotate(360deg) translateX(0) scale(1.5); } }
@keyframes swm-kn-loader-center { 0%, 10%, 90%, 100% { transform: scale(0.7); } 45%, 55% { transform: scale(1); } }

.swm-kinetex-network li:nth-child(2) { animation: swm-kn-loader-c-1 3.2s ease-in-out infinite 0.2s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(3) { animation: swm-kn-loader-c-2 3.2s ease-in-out infinite 0.4s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(4) { animation: swm-kn-loader-c-3 3.2s ease-in-out infinite 0.6s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(5) { animation: swm-kn-loader-c-4 3.2s ease-in-out infinite 0.8s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(6) { animation: swm-kn-loader-c-5 3.2s ease-in-out infinite 1s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(7) { animation: swm-kn-loader-c-6 3.2s ease-in-out infinite 1.2s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(8) { animation: swm-kn-loader-c-7 3.2s ease-in-out infinite 1.4s; animation-fill-mode: backwards; }
.swm-kinetex-network li:nth-child(9) { animation: swm-kn-loader-c-8 3.2s ease-in-out infinite 1.6s; animation-fill-mode: backwards; }

/* O Ring Spinner */
.swm-o-ring-loader-inner { width: 100px; height:100px; }

svg:not(:root).swm-o-ring-loader { width: 100px; height:100px; max-height: 300px; transform-origin: 50% 50%; overflow: visible;  }
.swm-o-ring-loader .ci1 { fill:var(--swm-loader-color-dark); animation: swm-o-ring-toBig 3s infinite -1.5s; transform-box: fill-box; transform-origin: 50% 50%; }
.swm-o-ring-loader .ciw { transform-box: fill-box; transform-origin: 50% 50%; animation: swm-o-ring-breath 3s infinite; fill:var(--swm-loader-color-body); }
.swm-o-ring-loader .ci2 { fill:var(--swm-loader-color-dark); animation: swm-o-ring-toBig2 3s infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.swm-o-ring-loader-points { animation: swm-o-ring-rot 3s infinite; transform-box: fill-box; transform-origin: 50% 50%;  }
@keyframes swm-o-ring-rot { 0% { transform: rotate(0deg); } 30% { transform: rotate(360deg); } 50% { transform: rotate(360deg); } 80% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes swm-o-ring-toBig { 0% { transform: scale(1) translateX(0px); } 30% { transform: scale(1) translateX(0px); } 50% { transform: scale(10) translateX(-4.5px); } 80% { transform: scale(10) translateX(-4.5px); } 100% { transform: scale(1) translateX(0px); } }
@keyframes swm-o-ring-toBig2 { 0% { transform: scale(1) translateX(0px); } 30% { transform: scale(1) translateX(0px); } 50% { transform: scale(10) translateX(4.5px); } 80% { transform: scale(10) translateX(4.5px); } 100% { transform: scale(1) translateX(0px); } }
@keyframes swm-o-ring-breath { 15% { transform: scale(1); } 40% { transform: scale(1.1); } 65% { transform: scale(1); } 90% { transform: scale(1.1); } }

/* Horizontal Lines Five */
.swm-h-lines-loader { margin-left:-40px; width: 50px; height: 7px; background: var(--swm-loader-color-dark); border-radius: 5px; animation: load 1.8s ease-in-out infinite; }
.swm-h-lines-loader:before,
.swm-h-lines-loader:after { position: absolute; display: block; content: ""; animation: load 1.8s ease-in-out infinite; height: 7px; border-radius: 5px; }
.swm-h-lines-loader:before { top: -18px; left: 10px; width: 40px; background: var(--swm-loader-color-dark); }
.swm-h-lines-loader:after { bottom: -18px; width: 35px; background: var(--swm-loader-color-dark); }
@keyframes load { 0% { transform: translateX(40px); } 50% { transform: translateX(-30px); } 100% { transform: translateX(40px); } }

/* Five Dots Loader Six */
.swm-five-dots-loader { width: 20px; height: 20px; background: var(--swm-loader-color-dark); border-radius: 100%; display: inline-block; animation: slide 1s infinite; }
.swm-five-dots-loader:nth-child(1) { animation-delay: 0.1s; }
.swm-five-dots-loader:nth-child(2) { animation-delay: 0.2s; }
.swm-five-dots-loader:nth-child(3) { animation-delay: 0.3s; }
.swm-five-dots-loader:nth-child(4) { animation-delay: 0.4s; }
.swm-five-dots-loader:nth-child(5) { animation-delay: 0.5s; }

@keyframes slide {  0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2); } 100% { transform: scale(1); } }

/* Wave */
.swm-loader-wave { width: 40px; height: 70px; display: flex; justify-content: space-between; }
.swm-loader-wave-rect { background-color:var(--swm-loader-color-dark); border-radius:50px; height: 100%; width:4px; animation: swm-loader-wave 1.2s infinite ease-in-out; }
.swm-loader-wave-rect:nth-child(1) { animation-delay: -1.2s; }
.swm-loader-wave-rect:nth-child(2) { animation-delay: -1.1s; }
.swm-loader-wave-rect:nth-child(3) { animation-delay: -1.0s; }
.swm-loader-wave-rect:nth-child(4) { animation-delay: -0.9s; }
.swm-loader-wave-rect:nth-child(5) { animation-delay: -0.8s; }
@keyframes swm-loader-wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } }

/* Square */
.swm-loader-square { width:40px; height:40px; background-color:var(--swm-loader-color-dark); animation: swm-loader-square 1.2s infinite ease-in-out; border-radius:5px; }

@keyframes swm-loader-square { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

/* Wandering Cubes */
.swm-loader-wandering-cubes { margin-left:-7px; margin-top:-7px; position:relative; display:block; width:50px; height:50px; }

.swm-loader-wandering-cube-1,
.swm-loader-wandering-cube-2 { width: 20px; height: 20px; background-color: var(--swm-loader-color-dark); position: absolute; top: 0; left: 0; -webkit-animation: swm-anim-cubemove 1.8s infinite ease-in-out; animation: swm-anim-cubemove 1.8s infinite ease-in-out; border-radius:3px; }
.swm-loader-wandering-cube-2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s }
@keyframes swm-anim-cubemove { 25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) } 50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) } 75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) } 100% { -webkit-transform: rotate(-360deg) } }

/* Fold Cube */
.swm-loader-fold { width: 40px; height: 40px; position: relative; transform: rotateZ(45deg); }
.swm-loader-fold-cube { float: left; width: 50%; height: 50%; position: relative; transform: scale(1.1); }
.swm-loader-fold-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--swm-loader-color-dark); animation: swm-loader-fold 2.4s infinite linear both; transform-origin: 100% 100%; }
.swm-loader-fold-cube:nth-child(2) { transform: scale(1.1) rotateZ(90deg); }
.swm-loader-fold-cube:nth-child(4) { transform: scale(1.1) rotateZ(180deg); }
.swm-loader-fold-cube:nth-child(3) { transform: scale(1.1) rotateZ(270deg); }
.swm-loader-fold-cube:nth-child(2):before { animation-delay: 0.3s; }
.swm-loader-fold-cube:nth-child(4):before { animation-delay: 0.6s; }
.swm-loader-fold-cube:nth-child(3):before { animation-delay: 0.9s; }
@keyframes swm-loader-fold { 0%,10% { transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%,75% { transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%,100% { transform: perspective(140px) rotateY(180deg); opacity: 0; } }

/* Chase Dots */
.swm-loader-chase-dots { width:40px; height:40px; position: relative; animation: swm-loader-chase 2.5s infinite linear both; }
.swm-loader-chase-dot { width: 100%; height: 100%; position: absolute; left: 0; top: 0; animation: swm-loader-chase-dot 2.0s infinite ease-in-out both; }
.swm-loader-chase-dot:before { content: ''; display: block; width: 25%; height: 25%; background-color: var(--swm-loader-color-dark); border-radius: 100%; animation: swm-loader-chase-dot-before 2.0s infinite ease-in-out both; }
.swm-loader-chase-dot:nth-child(1) { animation-delay: -1.1s; }
.swm-loader-chase-dot:nth-child(2) { animation-delay: -1.0s; }
.swm-loader-chase-dot:nth-child(3) { animation-delay: -0.9s; }
.swm-loader-chase-dot:nth-child(4) { animation-delay: -0.8s; }
.swm-loader-chase-dot:nth-child(5) { animation-delay: -0.7s; }
.swm-loader-chase-dot:nth-child(6) { animation-delay: -0.6s; }
.swm-loader-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
.swm-loader-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
.swm-loader-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
.swm-loader-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
.swm-loader-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
.swm-loader-chase-dot:nth-child(6):before { animation-delay: -0.6s; }

@keyframes swm-loader-chase {100% { transform: rotate(360deg); } }
@keyframes swm-loader-chase-dot {80%,100% { transform: rotate(360deg); } }
@keyframes swm-loader-chase-dot-before {50% { transform: scale(0.4); } 100%,0% { transform: scale(1.0); } }

/* Bounce Dots */
.swm-loader-bounce-dots { width:40px; height:40px; position: relative; }
.swm-loader-bounce-dot { width: 100%; height: 100%; border-radius: 50%; background-color:var(--swm-loader-color-dark); opacity: 0.6; position: absolute; top: 0; left: 0; animation: swm-loader-bounce 2s infinite cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.swm-loader-bounce-dot:nth-child(2) { animation-delay: -1.0s; }
@keyframes swm-loader-bounce { 0%,100% { transform: scale(0); } 45%,55% { transform: scale(1); } }

/*Pulse*/
.swm-loader-flow-dots { width: calc(50px * 1.3); height: calc(50px * 1.3); display: flex; justify-content: space-between; align-items:center; }
.swm-loader-flow-dot { width: 25%; height: 25%; background-color:var(--swm-loader-color-dark); border-radius: 50%; animation: swm-loader-flow 1.4s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0s infinite both; }
.swm-loader-flow-dot:nth-child(1) { animation-delay: -0.30s; }
.swm-loader-flow-dot:nth-child(2) { animation-delay: -0.15s; }
@keyframes swm-loader-flow { 0%,80%,100% { transform: scale(0.3); } 40% { transform: scale(1); } }

/*Swing Dots*/
.swm-loader-swing-dots { width: 60px; height: 60px; position: relative; animation: swm-loader-swing 1.8s infinite linear; }
.swm-loader-swing-dot { width: 45%; height: 45%; position: absolute; top: 0; left: 0; right: 0; margin: auto; background-color: var(--swm-loader-color-dark); border-radius: 100%; animation: swm-loader-swing-dot 2s infinite ease-in-out; }
.swm-loader-swing-dot:nth-child(2) { top: auto; bottom: 0; animation-delay: -1s; }
@keyframes swm-loader-swing { 100% { transform: rotate(360deg); } }
@keyframes swm-loader-swing-dot {0%,100% { transform: scale(0.2); } 50% { transform: scale(1); } }

/*Dot Loading*/
.swm-dot-loading { display: block; margin: 0 auto; width: 97px }
.swm-dot-loading-inner i { width: 19px; height: 19px; display: inline-block; border-radius: 50%; background: var(--swm-loader-color-dark); }
.swm-dot-loading-inner i:first-child { opacity: 0; animation: swm-dot-loading-anim2 .58s linear infinite; transform: translate(-19px) }
.swm-dot-loading-inner i:nth-child(2),
.swm-dot-loading-inner i:nth-child(3) { animation: swm-dot-loading-anim3 .58s linear infinite }
.swm-dot-loading-inner i:last-child { animation: swm-dot-loading-anim1 .58s linear infinite }
@keyframes swm-dot-loading-anim1 {100% { transform: translate(39px); opacity: 0 } }
@keyframes swm-dot-loading-anim2 {100% { transform: translate(19px); opacity: 1 } }
@keyframes swm-dot-loading-anim3 {100% { transform: translate(19px) } }