.bolinha1 {
    top: 550px;
    left: 320px;
}

.bolinha2 {
    top: 519px;
    left: 440px;
}

.bolinha3 {
    top: 520px;
    left: 570px;
}

.bolinha4 {
    top: 550px;
    left: 690px;
}

.bolinha5 {
    top: 610px;
    left: 790px;
}

.bolinha6 {
    top: 700px;
    left: 880px;
}

.bolinha7 {
    top: 810px;
    left: 942px;
}

.bolinha8 {
    top: 930px;
    left: 974px;
}

.bolinha9 {
    top: 1040px;
    left: 974px;
}

.bolinha10 {
    top: 1160px;
    left: 942px;
}

.bolinha11 {
    top: 1270px;
    left: 880px;
}

.bolinha12 {
    top: 1360px;
    left: 790px;
}

.bolinha13 {
    top: 1420px;
    left: 690px;
}

.bolinha14 {
    top: 1455px;
    left: 570px;
}

.bolinha15 {
    top: 1455px;
    left: 440px;
}

.bolinha16 {
    top: 1424px;
    left: 320px;
}

.bolinha17 {
    top: 1360px;
    left: 215px;
}

.bolinha18 {
    top: 1270px;
    left: 126px;
}

.bolinha19 {
    top: 1160px;
    left: 62px;
}

.bolinha20 {
    top: 1040px;
    left: 32px;
}

.bolinha21 {
    top: 930px;
    left: 32px;
}

.bolinha22 {
    top: 810px;
    left: 62px;
}

.bolinha23 {
    top: 700px;
    left: 126px;
}

.bolinha24 {
    top: 610px;
    left: 215px;
}

.bolinha {
    width: 72px;
    height: 72px;
    border-radius: 150px;
    background-color: rgba(255, 255, 255, .1);
    border: 3px solid #FFF;
    position: absolute;
}

.bolinha.acender {
    animation: acender .5s linear forwards;
}

.bolinha.apagar {
    animation: apagar .5s linear forwards;
}

.circulo {
    width: 870px;
    height: 870px;
    background-color: rgba(0, 0, 0, .8);
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 590px;
    border-radius: 50%;
    display: none;

}




.areaTexto {
    width: 1080px;
    height: 350px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    flex-direction: column;

    justify-content: center;
}

.areaTexto p {
    font-size: 91px;
    margin: 0;
    font-family: "Rubik Regular";
}

.areaTexto p strong {
    font-size: 144px;
    font-family: "Rubik Bold";
}



#tela-final {
    width: 1080px;
    height: 1920px;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 5;
    display: none;
    opacity: 0;
}


#tela-final > video {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

#tela-final > img {
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    display: none;
    opacity: 0;
    transform: scale(.5);
}

#tela-final > video {
    width: 1080px;
    height: 1920px;
}

#tela-final > img.zoomIn {
    display: block;
    animation: zoomIn 1s 2s forwards;
}

#tela-final.show {
    display: block;
    animation: fadeIn 1s 2s forwards;
}

.btn-girar,
.btn-girar-disabled {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 125px;
    margin: 0 auto;
    width: 543px;
    cursor: pointer;
    display: none;
}

.btn-girar.show,
.btn-girar-disabled.show {
    display: block;
}


#btn-voltar {
    width: 260px;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 360px;
    margin: 0 auto;
    position: absolute;
    z-index: 3;
    opacity: 0;
}

#tela-final.show > a > #btn-voltar {
    animation: fadeIn 1s 6s forwards;
}


@keyframes fadeIn {
    100% {
        opacity: 1;
    }
}

@keyframes acender {
    0% {
        box-shadow: 0;
        background-color: rgba(255, 255, 255, .1);
    }
    100% {
        background-color: #FFF;
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, .5);
    }
}

@keyframes apagar {
    0% {
        background-color: #FFF;
        box-shadow: 0 0 20px 10px rgba(255, 255, 255, .5);
    }
    100% {
        box-shadow: 0;
        background-color: rgba(255, 255, 255, .1);
    }
}

@keyframes zoomIn {
    100% {
        opacity: 1;
        transform: scale(1);
    }
}