.loader{display:none;z-index:999999}.loader-01{position:fixed;top:0;right:0;bottom:0;left:0;width:60px;height:60px;margin:auto;z-index:99}.loader__icon{position:absolute;top:-17px;left:-17px;width:33.3333333333px;height:33.3333333333px;border-radius:50%}.loader__icon--one{background-color:var(--main-color-one);-webkit-animation:iconOne 3s ease-out 0s infinite;animation:iconOne 3s ease-out 0s infinite}.loader__icon--two{background-color:var(--main-color-three);-webkit-animation:iconTwo 3s ease-out 0s infinite;animation:iconTwo 3s ease-out 0s infinite}.loader__icon--three{background-color:var(--main-color-two);-webkit-animation:iconThree 3s ease-out 0s infinite;animation:iconThree 3s ease-out 0s infinite}.loader__icon--four{background-color:var(--main-color-four);-webkit-animation:iconFour 3s ease-out 0s infinite;animation:iconFour 3s ease-out 0s infinite}@-webkit-keyframes iconOne {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    50% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    75% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
}@keyframes iconOne {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    50% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    75% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
}@-webkit-keyframes iconTwo {
    0%, 100% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    25% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    50% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    75% {
        transform: translate(0, 0);
    }
}@keyframes iconTwo {
    0%, 100% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    25% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    50% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    75% {
        transform: translate(0, 0);
    }
}@-webkit-keyframes iconThree {
    0%, 100% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    25% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
}@keyframes iconThree {
    0%, 100% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
    25% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    50% {
        transform: translate(0, 0);
    }
    75% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
}@-webkit-keyframes iconFour {
    0%, 100% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    25% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    75% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
}@keyframes iconFour {
    0%, 100% {
        transform: translate(0, calc(150px - 83.3333333333px));
    }
    25% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(calc(150px - 83.3333333333px), 0);
    }
    75% {
        transform: translate(calc(150px - 83.3333333333px), calc(150px - 83.3333333333px));
    }
}.loader-02 .pl{width:6em;height:6em}.pl__ring{animation:ringA 2s linear infinite}.pl__ring--a{stroke:#f42f25}.pl__ring--b{animation-name:ringB;stroke:#f49725}.pl__ring--c{animation-name:ringC;stroke:#255ff4}.pl__ring--d{animation-name:ringD;stroke:#f42582}@keyframes ringA {
    from, 4% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -330;
    }
    12% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -335;
    }
    32% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -595;
    }
    40%, 54% {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -660;
    }
    62% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -665;
    }
    82% {
        stroke-dasharray: 60 600;
        stroke-width: 30;
        stroke-dashoffset: -925;
    }
    90%, to {
        stroke-dasharray: 0 660;
        stroke-width: 20;
        stroke-dashoffset: -990;
    }
}@keyframes ringB {
    from, 12% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -110;
    }
    20% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -115;
    }
    40% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -195;
    }
    48%, 62% {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -220;
    }
    70% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -225;
    }
    90% {
        stroke-dasharray: 20 200;
        stroke-width: 30;
        stroke-dashoffset: -305;
    }
    98%, to {
        stroke-dasharray: 0 220;
        stroke-width: 20;
        stroke-dashoffset: -330;
    }
}@keyframes ringC {
    from {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0;
    }
    8% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5;
    }
    28% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175;
    }
    36%, 58% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220;
    }
    66% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225;
    }
    86% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395;
    }
    94%, to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440;
    }
}@keyframes ringD {
    from, 8% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: 0;
    }
    16% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -5;
    }
    36% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -175;
    }
    44%, 50% {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -220;
    }
    58% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -225;
    }
    78% {
        stroke-dasharray: 40 400;
        stroke-width: 30;
        stroke-dashoffset: -395;
    }
    86%, to {
        stroke-dasharray: 0 440;
        stroke-width: 20;
        stroke-dashoffset: -440;
    }
}