.loading-wrapper {
    background-color: #7fffd4;
}

.img-gallery-loading {
    --card-margin: var(--size-500);
    --card-gap: var(--size-600);
    --card-width: 260px;
    max-width: calc(var(--card-gap) * 4 + var(--card-width) * 3 + var(--card-margin) * 2);
    margin: var(--size-400) auto;
}

.card-loading-wrap {
    margin: var(--size-600) var(--card-margin);
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: var(--card-gap);
    gap: var(--card-gap);
    background-color: #7fffd4;
    border-radius: 20px;
    box-shadow: inset 4px 4px 4px #6ceec2, inset -4px -4px 4px #a4ffe1;
}

.card-loading {
    display: flex;
    flex-direction: column;
    padding: var(--size-300);
    border-radius: 3px;
    box-shadow: 4px 4px 4px #6ceec2, -4px -4px 4px #a4ffe1;
    text-align: center;
    flex-basis: var(--card-width);
}
.card-loading p {
    margin-top: auto;
    padding-top: 1.4rem;
    font-size: var(--fs-500);
    font-weight: var(--fw-bold);
    color: var(--color-primary-600);
}

/* Loading Image 1 ------------------------ */

.loading-fig_01 {
    --load_anm_time: 1.5s;
    position: relative;
}

.fig_01-loading-div {
    position: absolute;
    display: inline-block;
    /* margin at half height and width of div to center to top and left coordinates */
    margin: -8% 0 0 -8%;
    width: 16%;
    height: 16%;
    background-color: rgb(0, 81, 122);
    border-radius: 0 100%;
    animation: calc(var(--load_anm_time)/2) ease infinite alternate loading_animation;
}

.fig_01-loading-div:nth-of-type(1) {
    top: 8%;
    left: 50%;
    --load_rotation: 0deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -1);
}

.fig_01-loading-div:nth-of-type(2) {
    top: 20.302%;
    left: 79.699%;
    --load_rotation: 45deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -7 / 8);
}

.fig_01-loading-div:nth-of-type(3) {
    top: 50%;
    left: 92%;
    --load_rotation: 90deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -3 / 4);
}

.fig_01-loading-div:nth-of-type(4) {
    top: 79.699%;
    left: 79.699%;
    --load_rotation: 135deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -5 / 8);
}

.fig_01-loading-div:nth-of-type(5) {
    top: 92%;
    left: 50%;
    --load_rotation: 0deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -1 / 2);
}

.fig_01-loading-div:nth-of-type(6) {
    top: 79.699%;
    left: 20.302%;
    --load_rotation: 45deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -3 / 8);
}

.fig_01-loading-div:nth-of-type(7) {
    top: 50%;
    left: 8%;
    --load_rotation: 90deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -1 / 4);
}

.fig_01-loading-div:nth-of-type(8) {
    top: 20.302%;
    left: 20.302%;
    --load_rotation: 135deg;
    transform: rotate(var(--load_rotation));
    animation-delay: calc(var(--load_anm_time) * -1 / 8);
}

@keyframes loading_animation {
    to {
        background-color: rgb(199, 69, 177);
        transform: rotate(calc(60deg + var(--load_rotation)));
    }
}

#loading_circle {
    animation: var(--load_anm_time) linear -.2s infinite loading-circle-rotate;
    transform-origin: 50%;
    transform: rotate(0deg);
}

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

.flick-circle {
    width: 100%;
    height: 100%;
}

/* Loading Image 2 ------------------------ */

.loading_pie_section {
    animation: 11s steps(12) infinite rotate_pie ;
    transform-origin: 50%;
    transform: rotate(0deg)

}

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

#loading_pie_01 {
    fill: #00ffff;
    animation-delay: -12s;
}

#loading_pie_02 {
    fill: #33ccfe;
    animation-delay: -11s;
}

#loading_pie_03 {
    fill: #6699fd;
    animation-delay: -10s;
}

#loading_pie_04 {
    fill: #9966fd;
    animation-delay: -9s;
}

#loading_pie_05 {
    fill: #cc33fc;
    animation-delay: -8s;
}

#loading_pie_06 {
    fill: #e51afb;
    animation-delay: -7s;
}

#loading_pie_07 {
    fill: #ff00ff;
    animation-delay: -6s;
}

#loading_pie_08 {
    fill: #d927fc;
    animation-delay: -5s;
}

#loading_pie_09 {
    fill: #9966fd;
    animation-delay: -4s;
}

#loading_pie_10 {
    fill: #6699fd;
    animation-delay: -3s;
}

#loading_pie_11 {
    fill: #33ccfe;
    animation-delay: -2s;
}

/* Loading Image 3 ------------------------ */

.loading_pie_section_v3 {
    animation: 6s steps(11) infinite rotate_pie_v3;
    transform-origin: 50%;
    transform: rotate(0deg);
}

@keyframes rotate_pie_v3 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#loading_pie_01_v3 {
    fill: #00ffff;
    animation-delay: -6s;
}

#loading_pie_02_v3 {
    fill: #2bd4ff;
    animation-delay: -5s;
}

#loading_pie_03_v3 {
    fill: #55aaff;
    animation-delay: -4s;
}

#loading_pie_04_v3 {
    fill: #8080ff;
    animation-delay: -3s;
}

#loading_pie_05_v3 {
    fill: #aa55ff;
    animation-delay: -2s;
}

#loading_pie_06_v3 {
    fill: #d42bff;
    animation-delay: -1s;
}

#loading_pie_07_v3 {
    fill: #ff00ff;
    animation-delay: 0s;
}


/* Loading Image 4 ------------------------ */

.loading_fig_04 {
    position: relative;
    display: inline-block;
    text-align: center;
    align-self: center;
    width: 100%
}

.loading_fig_04_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    font-size: var(--fs-200);
    font-weight: 700;
    line-height: normal;
    background-color: rgb(0, 157, 0);
    border-radius: 50%;
    border: 8px solid rgb(87, 42, 0);
    box-shadow: inset 0 0 4px 3px #0008;
}

.loading_div_04 {
    position: absolute;
    display:inline-block;
    margin: 0 0 0 -16.666%;
    padding-top: 2%;
    width: 33.333%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform-origin: 50% 150%;
    animation: 3s ease-out infinite rotate_ball_04;
    box-shadow: inset 0 -6px 8px #0004, inset 3px -3px 8px #0002, inset -3px -3px 8px #0002, 0px 3px 6px rgba(0, 37, 0, 0.8);
}

.ld0401 {
    color: rgb(0, 0, 255);
    background-color: rgb(0, 0, 255);
    animation-delay: -3s;
}

.ld0402 {
    color: rgb(122, 0, 255);
    background-color: rgb(122, 0, 255);
    animation-delay: -2s;

}

.ld0403 {
    color: rgb(255, 0, 255);
    background-color: rgb(255, 0, 255);
    animation-delay: -1s;

}

@keyframes rotate_ball_04 {
    to {
        transform: rotate(360deg);
    }
}

.fr_04 {
    display: inline-block;
    width: 57%;
    aspect-ratio: 9/7;
    font-size: min(3.5vw, 157%);
    background-color: #ffffffbb;
    border: 1.5px solid #fff;
    border-radius: 50%;
    animation: 3s ease-out infinite rf04;
    transform-origin: 50% 92%;
}

.ld0401 .fr_04 {
    animation-delay: -3s;
}

.ld0402 .fr_04 {
    animation-delay: -2s;
}

.ld0403 .fr_04 {
    animation-delay: -1s;
}

@keyframes rf04 {
    to {
        transform: rotate(-1080deg);
    }

}


/* Loading Image 5 ------------------------ */

.path_delay_05-1 { stroke:#00ffff; fill:#00ffff33;}
.path_delay_05-2 { stroke:#40bfff; fill:#40bfff33;}
.path_delay_05-3 { stroke:#8080ff; fill:#8080ff33;}
.path_delay_05-4 { stroke:#bf40ff; fill:#bf40ff33;}
.path_delay_05-5 { stroke:#ff00ff; fill:#ff00ff33;}

.st0 {
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transform-origin: 50%;
    animation: 2s ease-in-out infinite alternate li05_anm;
}

@keyframes li05_anm {
from { stroke-dashoffset:1; transform: rotate(0deg);}
to { stroke-dashoffset:2; transform: rotate(360deg);}
}

/* Loading Image 6 ------------------------ */

.loading_wave_06 {
    filter: url(#inner-glow_06);
    fill: #fff;
    stroke-width: 2px;
    transform-origin: 50%;
    animation: 1.5s ease-in-out infinite alternate lw06-anm;
}

.lw06_0{fill:#fff;}
.lw06_1{fill:#00ffff;}
.lw06_2{animation-delay: -.2s; fill:#40bfff;}
.lw06_3{animation-delay: -.4s; fill:#8080ff;}
.lw06_4{animation-delay: -.6s; fill:#bf40ff;}
.lw06_5{animation-delay: -.8s; fill:#ff00ff;}

@keyframes lw06-anm {
    to{opacity: .2; transform: rotate(30deg) scale(80%);}
}

/* Loading Image 7 ------------------------ */

.card-infinity {
    flex-basis: auto;
}