.card {
    display: grid;
    grid-template-rows: 50% 50%;
    justify-content: center;
    align-items: flex-start;
    border: thin solid gray;
    position: absolute;
    height: 12rem;
    width: 8rem;
    border-radius: 5px;
    left: 50%;
    background-color: white;
}

.card:nth-of-type(1) {
    z-index: 7;
    animation-delay: 0s;
}

.card:nth-of-type(2) {
    z-index: 6;
    animation-delay: 0.1s;
}

.card:nth-of-type(3) {
    z-index: 5;
    animation-delay: 0.2s;
}

.card:nth-of-type(4) {
    z-index: 4;
    animation-delay: 0.3s;
}

.card:nth-of-type(5) {
    z-index: 3;
    animation-delay: 0.4s;
}

.card:nth-of-type(6) {
    z-index: 2;
    animation-delay: 0.5s;
}

.card:nth-of-type(7) {
    z-index: 1;
    animation-delay: 0.6s;
}

.card {
    animation-fill-mode: both;
    animation-name: cardmove;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.loadcontent {
    position: relative;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: center;
    min-width: 40rem;
    max-width: 120rem;
    margin: 10rem;
}

.metaload {
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    position: fixed;
    background-color: white;
    margin: 0;
    z-index: 1000;
}

.loaddiv {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    white-space: normal;
    font-size: 5rem !important;
    line-height: 5rem !important;
}

.loaddiv :first-child::after {
    content: " ";
    white-space: pre;
}

.loaddiv :nth-child(2)::after {
    text-align: left;
    display: inline-block;
    width: 5rem;
    content: "";
    animation-fill-mode: both;
    animation-name: loaddiv;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

.cardcontain {
    margin-top: 1rem;
    width: 100%;
    height: 15rem;
}

@keyframes loaddiv {
    0% {
        content: '';
    }
    25% {
        content: '.';
    }
    50% {
        content: '..';
    }
    75% {
        content: '...';
    }
}

@keyframes cardmove {
    0% {
        left: 0%;
    }
    10% {
        transform: rotate(0deg);
        left: 0%;
    }
    40% {
        transform: rotate(360deg);
        left: calc(100% - 8rem);
    }
    60% {
        transform: rotate(360deg);
        left: calc(100% - 8rem);
    }
    90% {
        transform: rotate(0deg);
        left: 0%;
    }
    100% {
        left: 0%;
    }
}

.card .card1 {
    margin-top: 1.5rem;
    width: 5rem;
}

.card .card2 {
    transform: rotate(180deg);
    margin-top: 1.5rem;
    width: 5rem;
}

@media screen and (max-width: 45rem) {
    .loadcontent {
        min-width: unset;
        max-width: 100%;
        margin: 1rem;
    }
    .cardcontain {
        height: 7rem;
    }
    .card .card1,
    .card .card2 {
        width: 2.5rem;
        margin-top: 0.75rem;
    }
    .card {
        height: 6rem;
        width: 4rem;
    }
    .loaddiv :first-child{
        width: 100%;
        text-align: center;
    }
    .loaddiv {
        font-size: 3rem !important;
        line-height: 3rem !important;
    }
    .loaddiv :nth-child(2)::after {
        width: 2.5rem;
    }
    @keyframes cardmove {
        0% {
            left: 0%;
        }
        10% {
            transform: rotate(0deg);
            left: 0%;
        }
        40% {
            transform: rotate(180deg);
            left: calc(100% - 4rem);
        }
        60% {
            transform: rotate(180deg);
            left: calc(100% - 4rem);
        }
        90% {
            transform: rotate(0deg);
            left: 0%;
        }
        100% {
            left: 0%;
        }
    }
}