/* Espaçamento */
.espacamento-meio{
    height: 1vh;
}

/* DNA Loader Azul e Branco 1 */
.dna-wave-container-azul-branco {
    display: flex;
    justify-content: center;
    transform: scale(0.30);
}

.dna-unit-azul-branco {
    position: relative;
    width: 16px;
    height: 76px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-azul-branco::before, .dna-unit-azul-branco::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-azul-branco::before {
    background-color: #ffffff;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-azul-branco::after {
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

/* 2 */

.dna-wave-container-geral-azul-branco{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.30);
    margin-left: 41%;
}

.dna-unit-geral-azul-branco {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 16px;
    height: 76px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-geral-azul-branco::before, .dna-unit-geral-azul-branco::after {
    display: inline-flex;
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-geral-azul-branco::before {
    display: inline-flex;
    background-color: #ffffff;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-geral-azul-branco::after {
    display: inline-flex;
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

/* 3 */

.dna-wave-container-geral-azul-branco-2{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.30); 
}

.dna-unit-geral-azul-branco-2 {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 16px;
    height: 32px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-geral-azul-branco-2::before, .dna-unit-geral-azul-branco-2::after {
    display: inline-flex;
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-geral-azul-branco-2::before {
    display: inline-flex;
    background-color: #ffff;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-geral-azul-branco-2::after {
    display: inline-flex;
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}


.dna-wave-container-geral-azul-branco-2{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.30); 
}

.dna-unit-geral-azul-branco-2 {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 16px;
    height: 32px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-geral-azul-branco-2::before, .dna-unit-geral-azul-branco-2::after {
    display: inline-flex;
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-geral-azul-branco-2::before {
    display: inline-flex;
    background-color: #ffff;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-geral-azul-branco-2::after {
    display: inline-flex;
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

/* DNA Loader azul e roxo 1 */

.dna-wave-container-geral-azul-roxo{ 
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.30); 
}

.dna-unit-geral-azul-roxo {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 16px;
    height: 32px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-geral-azul-roxo::before, .dna-unit-geral-azul-roxo::after {
    display: inline-flex;
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-geral-azul-roxo::before {
    display: inline-flex;
    background-color: #500878;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-geral-azul-roxo::after {
    display: inline-flex;
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

/* 2 */

.dna-wave-container-geral-azul-roxo-2{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.30); 
}

.dna-unit-geral-azul-roxo-2 {
    display: inline-flex;
    position: relative;
    justify-content: center;
    width: 18px;
    height: 32px; 
    animation-delay: calc(var(--i) * -0.15s);
}

.dna-unit-geral-azul-roxo-2::before, .dna-unit-geral-azul-roxo-2::after {
    display: inline-flex;
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    left: 0;
}

.dna-unit-geral-azul-roxo-2::before {
    display: inline-flex;
    background-color: #500878;
    top: 0;
    animation: strand-a-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}

.dna-unit-geral-azul-roxo-2::after {
    display: inline-flex;
    background-color: #2196F3;
    bottom: 0;
    animation: strand-b-move 1.8s ease-in-out infinite;
    animation-delay: inherit;
}


@keyframes strand-a-move {
    0%, 100% {
    transform: translateY(0px) scale(0.6);
    opacity: 0.7;
    z-index: 1;
    }
    25% {
    transform: translateY(35px) scale(1.1);
    opacity: 1;
    z-index: 2;
    }
    50% {
    transform: translateY(70px) scale(0.6);
    opacity: 0.7;
    z-index: 1;
    }
    75% {
    transform: translateY(35px) scale(0.4);
    opacity: 0.5;
    z-index: 0;
    }
}

@keyframes strand-b-move {
    0%, 100% {
    transform: translateY(0px) scale(0.6);
    opacity: 0.7;
    z-index: 1;
    }
    25% {
    transform: translateY(-35px) scale(0.4);
    opacity: 0.5;
    z-index: 0;
    }
    50% {
    transform: translateY(-70px) scale(0.6);
    opacity: 0.7;
    z-index: 1;
    }
    75% {
    transform: translateY(-35px) scale(1.1);
    opacity: 1;
    z-index: 2;
    }
}