/* ===================================
        Preloader
   ====================================== */

   .preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: #202020;
    /* background:linear-gradient(45deg, rgb(53, 13, 130) 0%, rgba(128, 33, 181, 1) 50%); */
    z-index: 999;
}
.center {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}


.spinner {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.spinner .blob {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    /*background:linear-gradient(to right,#fc2547 50%, #ff5a00 100%);*/
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.spinner .blob.top {
    top: 0;
    -webkit-animation: blob-top 1s infinite ease-in;
    animation: blob-top 1s infinite ease-in;
}
.spinner .blob.bottom {
    top: 100%;
    -webkit-animation: blob-bottom 1s infinite ease-in;
    animation: blob-bottom 1s infinite ease-in;
}
.spinner .blob.left {
    left: 0;
    -webkit-animation: blob-left 1s infinite ease-in;
    animation: blob-left 1s infinite ease-in;
}
.spinner .move-blob {
    border-color:#c02210;
    background:linear-gradient(to right,#c02210 50%, #c02210 100%);
    top: 0;
    -webkit-animation: blob-spinner-mover 1s infinite ease-in;
    animation: blob-spinner-mover 1s infinite ease-in;
}

@-webkit-keyframes blob-bottom {
    25%, 50%, 75% {
        top: 50%;
        left: 100%;
    }
    100% {
        top: 0;
        left: 50%;
    }
}

@keyframes blob-bottom {
    25%, 50%, 75% {
        top: 50%;
        left: 100%;
    }
    100% {
        top: 0;
        left: 50%;
    }
}
@-webkit-keyframes blob-left {
    25% {
        top: 50%;
        left: 0;
    }
    50%, 100% {
        top: 100%;
        left: 50%;
    }
}
@keyframes blob-left {
    25% {
        top: 50%;
        left: 0;
    }
    50%, 100% {
        top: 100%;
        left: 50%;
    }
}
@-webkit-keyframes blob-top {
    50% {
        top: 0;
        left: 50%;
    }
    75%, 100% {
        top: 50%;
        left: 0;
    }
}
@keyframes blob-top {
    50% {
        top: 0;
        left: 50%;
    }
    75%, 100% {
        top: 50%;
        left: 0;
    }
}
@-webkit-keyframes blob-spinner-mover {
    0%, 100% {
        top: 0;
        left: 50%;
    }
    25% {
        top: 50%;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 50%;
    }
    75% {
        top: 50%;
        left: 0;
    }
}
@keyframes blob-spinner-mover {
    0%, 100% {
        top: 0;
        left: 50%;
    }
    25% {
        top: 50%;
        left: 100%;
    }
    50% {
        top: 100%;
        left: 50%;
    }
    75% {
        top: 50%;
        left: 0;
    }
}

/*effect*/