.defaultPosition{
    transform: translateX(0) translateY(0) translateZ(0) !important;
    opacity: 1 !important;
}

.defaultWidth{
    width: 100% !important;
}

:root{
    --anim-prop: all 0.7s ease-out;
}

@keyframes rotateBorder {
    0% {
        border: 1px solid #008080;
    }

    25% {
        border-top-color: #FFFFFF;
    }

    50% {
        border-right-color: #FFFFFF;
    }

    75% {
        border-bottom-color: #FFFFFF;
    }

    100% {
        border-color: #008080;
    }
}

@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }

}

@keyframes topRingRotate {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.startLeft{
    transform: translateX(-15%);
    opacity: 0;
    transition: var(--anim-prop);
    transition-delay: 0.5s;
}
.startRight{
    transform: translateX(15%);
    opacity: 0;
    transition: var(--anim-prop);
    transition-delay: 0.7s;
}
.startTop{
    transform: translateY(-100%);
    opacity: 0;
    transition: var(--anim-prop);
    transition-delay: 0.3s;
    /* position: absolute;
    z-index: 0; */
}

.startBottom {
    transform: translateY(0%) translateY(100%);
    opacity: 0;
    transition: var(--anim-prop);
    overflow: hidden;
}