/*****************************************
			LOADER
******************************************/
#loader-container {
	background-color: rgba(255,255,255,0.9);
	display: flex;
    z-index: 9999999999;
}

/*@keyframes loader-sec-1 {
    0% {
        top: 58.211999999999996px;
        height: 114.57600000000001px
    }

    100%,50% {
        top: 79.69500000000001px;
        height: 71.61px
    }
}
@keyframes loader-sec-2 {
    0% {
        top: 63.58275px;
        height: 103.8345px
    }

    100%,50% {
        top: 79.69500000000001px;
        height: 71.61px
    }
}
@keyframes loader-sec-3 {
    0% {
        top: 68.95349999999999px;
        height: 93.09300000000002px
    }

    100%,50% {
        top: 79.69500000000001px;
        height: 71.61px
    }
}
.loader-sec div {
    position: absolute;
    width: 36.96px;
    box-sizing: content-box
}
.loader-sec div:first-child {
    left: 39.27px;
    background: #008dbf;
    animation: .9803921568627451s cubic-bezier(0,.5,.5,1) infinite loader-sec-1;
    animation-delay: -.196s
}
.loader-sec div:nth-child(2) {
    left: 97.02px;
    background: #008dbf;
    animation: .9803921568627451s cubic-bezier(0,.5,.5,1) infinite loader-sec-2;
    animation-delay: -.098s
}
.loader-sec div:nth-child(3) {
    left: 154.77px;
    background: #008dbf;
    animation: .9803921568627451s cubic-bezier(0,.5,.5,1) infinite loader-sec-3;
    animation-delay: undefineds
}
.loader-spinner {
    width: 231px;
    height: 231px;
    display: inline-block;
    overflow: hidden;
    margin: auto;
    position: relative
}
.loader-sec {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0
}
*/
/* HTML: <div class="loader"></div> */
.loader {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side,#000000 94%,#0000),
    radial-gradient(farthest-side,#149bd7 94%,#0000),
    radial-gradient(farthest-side,#000000 94%,#0000),
    radial-gradient(farthest-side,#149bd7 94%,#0000),
    #000000;
  background-size: 105% 105%;
  background-repeat: no-repeat;
  animation: l5 2s infinite; 
}
@keyframes l5 {
  0%  {background-position: 50% -110px,-100px 50%, 50% calc(100% + 110px),calc(100% + 110px) 50%}
  20%,
  25% {background-position: 50% -110px,-110px 50%, 50% calc(100% + 110px),50% 50%}
  45%,
  50% {background-position: 50% -110px,-110px 50%, 50% 50%              ,50% 50%}
  75%,
  75% {background-position: 50% -110px, 50%  50%, 50% 50%              ,50% 50%}
  95%,
  100%{background-position: 50%  50% , 50%  50%, 50% 50%              ,50% 50%}
}