.holder {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background-color: #ffffffc9;
                z-index: 9999;
            }
            .preloader {
                /* size */
                width: 60px;
                z-index: 999;
                height: 60px;
                position: sticky;
                left: 50%;
                top: 50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
                -webkit-animation: rotatePreloader 2s infinite ease-in;
                animation: rotatePreloader 2s infinite ease-in;
            }

            @-webkit-keyframes rotatePreloader {
                0% {
                    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
                    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
                }
                100% {
                    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
                    transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
                }
            }

            @keyframes rotatePreloader {
                0% {
                    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
                    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
                }
                100% {
                    -webkit-transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
                    transform: translateX(-50%) translateY(-50%) rotateZ(-360deg);
                }
            }

            .preloader div {
                position: absolute;
                width: 100%;
                height: 100%;
                opacity: 0;
                z-index: 999;
            }

            .preloader div:before {
                content: "";
                position: absolute;
                left: 50%;
                top: 0%;
                width: 10%;
                height: 10%;
                background-color: #c30031;
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
                border-radius: 50%;
            }

            .preloader div:nth-child(1) {
                -webkit-transform: rotateZ(0deg);
                transform: rotateZ(0deg);
                -webkit-animation: rotateCircle1 2s infinite linear;
                animation: rotateCircle1 2s infinite linear;
                z-index: 9;
            }

            @-webkit-keyframes rotateCircle1 {
                0% {
                    opacity: 0;
                }
                0% {
                    opacity: 1;
                    -webkit-transform: rotateZ(36deg);
                    transform: rotateZ(36deg);
                }
                7% {
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                57% {
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle1 {
                0% {
                    opacity: 0;
                }
                0% {
                    opacity: 1;
                    -webkit-transform: rotateZ(36deg);
                    transform: rotateZ(36deg);
                }
                7% {
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                57% {
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(2) {
                -webkit-transform: rotateZ(36deg);
                transform: rotateZ(36deg);
                -webkit-animation: rotateCircle2 2s infinite linear;
                animation: rotateCircle2 2s infinite linear;
                z-index: 8;
            }

            @-webkit-keyframes rotateCircle2 {
                5% {
                    opacity: 0;
                }
                5.0001% {
                    opacity: 1;
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                12% {
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                62% {
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle2 {
                5% {
                    opacity: 0;
                }
                5.0001% {
                    opacity: 1;
                    -webkit-transform: rotateZ(0deg);
                    transform: rotateZ(0deg);
                }
                12% {
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                62% {
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(3) {
                -webkit-transform: rotateZ(72deg);
                transform: rotateZ(72deg);
                -webkit-animation: rotateCircle3 2s infinite linear;
                animation: rotateCircle3 2s infinite linear;
                z-index: 7;
            }

            @-webkit-keyframes rotateCircle3 {
                10% {
                    opacity: 0;
                }
                10.0002% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                17% {
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                67% {
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle3 {
                10% {
                    opacity: 0;
                }
                10.0002% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-36deg);
                    transform: rotateZ(-36deg);
                }
                17% {
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                67% {
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(4) {
                -webkit-transform: rotateZ(108deg);
                transform: rotateZ(108deg);
                -webkit-animation: rotateCircle4 2s infinite linear;
                animation: rotateCircle4 2s infinite linear;
                z-index: 6;
            }

            @-webkit-keyframes rotateCircle4 {
                15% {
                    opacity: 0;
                }
                15.0003% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                22% {
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                72% {
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle4 {
                15% {
                    opacity: 0;
                }
                15.0003% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-72deg);
                    transform: rotateZ(-72deg);
                }
                22% {
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                72% {
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(5) {
                -webkit-transform: rotateZ(144deg);
                transform: rotateZ(144deg);
                -webkit-animation: rotateCircle5 2s infinite linear;
                animation: rotateCircle5 2s infinite linear;
                z-index: 5;
            }

            @-webkit-keyframes rotateCircle5 {
                20% {
                    opacity: 0;
                }
                20.0004% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                27% {
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                77% {
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle5 {
                20% {
                    opacity: 0;
                }
                20.0004% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-108deg);
                    transform: rotateZ(-108deg);
                }
                27% {
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                77% {
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(6) {
                -webkit-transform: rotateZ(180deg);
                transform: rotateZ(180deg);
                -webkit-animation: rotateCircle6 2s infinite linear;
                animation: rotateCircle6 2s infinite linear;
                z-index: 4;
            }

            @-webkit-keyframes rotateCircle6 {
                25% {
                    opacity: 0;
                }
                25.0005% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                32% {
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                82% {
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle6 {
                25% {
                    opacity: 0;
                }
                25.0005% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-144deg);
                    transform: rotateZ(-144deg);
                }
                32% {
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                82% {
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(7) {
                -webkit-transform: rotateZ(216deg);
                transform: rotateZ(216deg);
                -webkit-animation: rotateCircle7 2s infinite linear;
                animation: rotateCircle7 2s infinite linear;
                z-index: 3;
            }

            @-webkit-keyframes rotateCircle7 {
                30% {
                    opacity: 0;
                }
                30.0006% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                37% {
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                87% {
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle7 {
                30% {
                    opacity: 0;
                }
                30.0006% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-180deg);
                    transform: rotateZ(-180deg);
                }
                37% {
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                87% {
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(8) {
                -webkit-transform: rotateZ(252deg);
                transform: rotateZ(252deg);
                -webkit-animation: rotateCircle8 2s infinite linear;
                animation: rotateCircle8 2s infinite linear;
                z-index: 2;
            }

            @-webkit-keyframes rotateCircle8 {
                35% {
                    opacity: 0;
                }
                35.0007% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                42% {
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                92% {
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle8 {
                35% {
                    opacity: 0;
                }
                35.0007% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-216deg);
                    transform: rotateZ(-216deg);
                }
                42% {
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                92% {
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(9) {
                -webkit-transform: rotateZ(288deg);
                transform: rotateZ(288deg);
                -webkit-animation: rotateCircle9 2s infinite linear;
                animation: rotateCircle9 2s infinite linear;
                z-index: 1;
            }

            @-webkit-keyframes rotateCircle9 {
                40% {
                    opacity: 0;
                }
                40.0008% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                47% {
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                97% {
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle9 {
                40% {
                    opacity: 0;
                }
                40.0008% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-252deg);
                    transform: rotateZ(-252deg);
                }
                47% {
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                97% {
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            .preloader div:nth-child(10) {
                -webkit-transform: rotateZ(324deg);
                transform: rotateZ(324deg);
                -webkit-animation: rotateCircle10 2s infinite linear;
                animation: rotateCircle10 2s infinite linear;
                z-index: 0;
            }

            @-webkit-keyframes rotateCircle10 {
                45% {
                    opacity: 0;
                }
                45.0009% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                52% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                }
                102% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }

            @keyframes rotateCircle10 {
                45% {
                    opacity: 0;
                }
                45.0009% {
                    opacity: 1;
                    -webkit-transform: rotateZ(-288deg);
                    transform: rotateZ(-288deg);
                }
                52% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                }
                102% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                }
                100% {
                    -webkit-transform: rotateZ(-324deg);
                    transform: rotateZ(-324deg);
                    opacity: 1;
                }
            }