/*
Gears: a sixteen-tooth gear driving a ten-tooth one driving an eight-tooth one, each with a lighter
hub. All three share a tooth pitch of 6px, so a tooth of one sits in a gap of the next along their line
of centres and the teeth mesh instead of passing through one another. Everything else follows from that:
turn times run in proportion to tooth count (8s, 5s, 4s) and neighbours turn in opposite directions, which
is what keeps them meshed while they run.

Each gear is one clip-path, four points per tooth, generated from the tooth count and the phase that puts
a tooth on the line of centres. Editing a tooth count or a centre by hand will break the mesh - the
polygons have to be regenerated together.
*/
.loader_box .loader96 {
    position: relative;
    width: 240px;
    height: 176px;
    transform: scale(0.9);
}

.loader_box .loader96-cog {
    position: absolute;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.loader_box .loader96-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
}

.loader_box .loader96-large {
    left: 74.52px;
    top: 101.37px;
    width: 108px;
    height: 108px;
    margin: -54px 0 0 -54px;
    background: radial-gradient(circle, #49ABCB 20%, #036C91 50%);
    animation-name: loader96-turn;
    animation-duration: 8.0s;
    clip-path: polygon(79.22% 24.33%, 88.58% 18.20%, 93.08% 24.62%, 84.11% 31.32%, 86.81% 37.47%, 97.82% 35.38%, 99.51% 43.04%, 88.66% 45.80%, 88.81% 52.51%, 99.77% 54.79%, 98.41% 62.52%, 87.33% 60.91%, 84.89% 67.17%, 94.15% 73.47%, 89.93% 80.09%, 80.31% 74.37%, 75.67% 79.22%, 81.80% 88.58%, 75.38% 93.08%, 68.68% 84.11%, 62.53% 86.81%, 64.62% 97.82%, 56.96% 99.51%, 54.20% 88.66%, 47.49% 88.81%, 45.21% 99.77%, 37.48% 98.41%, 39.09% 87.33%, 32.83% 84.89%, 26.53% 94.15%, 19.91% 89.93%, 25.63% 80.31%, 20.78% 75.67%, 11.42% 81.80%, 6.92% 75.38%, 15.89% 68.68%, 13.19% 62.53%, 2.18% 64.62%, 0.49% 56.96%, 11.34% 54.20%, 11.19% 47.49%, 0.23% 45.21%, 1.59% 37.48%, 12.67% 39.09%, 15.11% 32.83%, 5.85% 26.53%, 10.07% 19.91%, 19.69% 25.63%, 24.33% 20.78%, 18.20% 11.42%, 24.62% 6.92%, 31.32% 15.89%, 37.47% 13.19%, 35.38% 2.18%, 43.04% 0.49%, 45.80% 11.34%, 52.51% 11.19%, 54.79% 0.23%, 62.52% 1.59%, 60.91% 12.67%, 67.17% 15.11%, 73.47% 5.85%, 80.09% 10.07%, 74.37% 19.69%);
}

.loader_box .loader96-large .loader96-hub {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    background: #6FCFEF;
    box-shadow: inset -6px -6px 4px rgba(3, 110, 145, 0.6);
}

.loader_box .loader96-medium {
    left: 138.42px;
    top: 56.63px;
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
    background: radial-gradient(circle, #A5CE3A 30%, #41AD49 60%);
    animation-name: loader96-turn-back;
    animation-duration: 5.0s;
    clip-path: polygon(34.91% 79.72%, 25.15% 93.39%, 15.14% 85.85%, 25.59% 72.70%, 20.32% 65.17%, 4.39% 70.50%, 0.73% 58.51%, 16.91% 54.02%, 17.07% 44.83%, 1.06% 39.78%, 5.14% 27.92%, 20.87% 33.80%, 26.40% 26.46%, 16.41% 12.96%, 26.68% 5.77%, 35.95% 19.77%, 44.74% 17.08%, 44.60% 0.29%, 57.13% 0.51%, 56.41% 17.29%, 65.09% 20.28%, 74.85% 6.61%, 84.86% 14.15%, 74.41% 27.30%, 79.68% 34.83%, 95.61% 29.50%, 99.27% 41.49%, 83.09% 45.98%, 82.93% 55.17%, 98.94% 60.22%, 94.86% 72.08%, 79.13% 66.20%, 73.60% 73.54%, 83.59% 87.04%, 73.32% 94.23%, 64.05% 80.23%, 55.26% 82.92%, 55.40% 99.71%, 42.87% 99.49%, 43.59% 82.71%);
}

.loader_box .loader96-medium .loader96-hub {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    background: #C7F54F;
    box-shadow: inset -4px -4px 3px rgba(65, 173, 72, 0.6);
}

.loader_box .loader96-small {
    left: 189.48px;
    top: 74.21px;
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    background: radial-gradient(circle, #4452A4 20%, #3C3D71 50%);
    animation-name: loader96-turn;
    animation-duration: 4.0s;
    clip-path: polygon(21.18% 58.32%, 1.19% 60.82%, 0.23% 45.21%, 20.38% 45.26%, 23.74% 35.50%, 7.83% 23.14%, 18.20% 11.42%, 32.41% 25.70%, 41.68% 21.18%, 39.18% 1.19%, 54.79% 0.23%, 54.74% 20.38%, 64.50% 23.74%, 76.86% 7.83%, 88.58% 18.20%, 74.30% 32.41%, 78.82% 41.68%, 98.81% 39.18%, 99.77% 54.79%, 79.62% 54.74%, 76.26% 64.50%, 92.17% 76.86%, 81.80% 88.58%, 67.59% 74.30%, 58.32% 78.82%, 60.82% 98.81%, 45.21% 99.77%, 45.26% 79.62%, 35.50% 76.26%, 23.14% 92.17%, 11.42% 81.80%, 25.70% 67.59%);
}

.loader_box .loader96-small .loader96-hub {
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    background: #7282E5;
    box-shadow: inset -2px -2px 2px rgba(68, 81, 164, 0.6);
}

@keyframes loader96-turn {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes loader96-turn-back {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .loader_box .loader96-cog { animation: none; }
}