#preloader {
    position: fixed;
    display: none;
    top: 0;
    left: -10%;
    right: -10%;
    height: 0;
    margin-left: calc(100vw - 100%);
    overflow-x: hidden;
}

body.preloader_active {
    height: 100vh;
    overflow-y: hidden;
}

body.preloader_active #preloader {
    height: auto;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

@keyframes preloaderLeaving {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#preloader img {
    z-index: 120;
}

#preloader .preloader_animation {
    position: absolute;
    width: calc(3.23625vw + 77.86408px);
    height: calc(3.23625vw + 77.86408px);
    border: 3px solid #ffffff;
    border-radius: 50%;
    opacity: 0;
    z-index: 110;
    animation: preloaderAnimation 0.6s ease-out infinite 0s;
}


.spinner {
    -webkit-animation: rotator 1.4s linear infinite;
    animation: rotator 1.4s linear infinite;
}

@-webkit-keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

@keyframes rotator {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }
}

.path {
    stroke-dasharray: 187;
    stroke-dashoffset: 0;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
    animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes colors {
    0% {
        stroke: red;
    }

    14.285714286% {
        stroke: orange;
    }

    28.571428572% {
        stroke: yellow;
    }

    42.857142858% {
        stroke: green;
    }

    57.142857144% {
        stroke: blue;
    }

    71.42857143% {
        stroke: indigo;
    }

    100% {
        stroke: violet;
    }
}

@keyframes colors {
    0% {
        stroke: red;
    }

    14.285714286% {
        stroke: orange;
    }

    28.571428572% {
        stroke: yellow;
    }

    42.857142858% {
        stroke: green;
    }

    57.142857144% {
        stroke: blue;
    }

    71.42857143% {
        stroke: indigo;
    }

    100% {
        stroke: violet;
    }
}

@-webkit-keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 187;
    }

    50% {
        stroke-dashoffset: 46.75;
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 187;
        -webkit-transform: rotate(450deg);
        transform: rotate(450deg);
    }
}