html {
    width: 100vw;
    background-color: #8FB7BA;
}


.contenedor-todo {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #036066 !important;
}

.img-fondo {
    position: absolute;
    z-index: 0;
    top: 1.5%;
    left: 16.2%;
    width: 82%;
   
}


/* lineas pocenctuales */

.img-linea-1 {
    position: absolute;
    width: 21%;
    left: 47.3%;
    top: 35.7%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite; 
    animation-delay: 1s;
    z-index: 1;
}
.img-linea-2 {
    position: absolute;
    width: 24.5%;
    left: 45.5%;
    top: 33.5%;
    animation: rotate360 20s linear infinite;
    /* border: solid 1px white; */
    animation-delay: 1.5s;
    z-index: 1;
}
.img-linea-3 {
    position: absolute;
    width: 27.5%;
    left: 44.05%;
    top: 31.5%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite; 
    animation-delay: 2s;
    z-index: 1;
}
.img-linea-4 {
    position: absolute;
    width: 30.65%;
    left: 42.4%;
    top: 29.3%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite;
    animation-delay: 2.5s;
    z-index: 1;
}
.img-linea-5{
    position: absolute;
    width: 33.65%;
    left: 40.95%;
    top: 27.32%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite; 
    animation-delay: 3s;
    z-index: 1;
}
.img-linea-6 {
    position: absolute;
    width: 37.3%;
    left: 38.97%;
    top: 25%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite;
    animation-delay: 3.5s;
    z-index: 1;
}
.img-linea-7 {
    position: absolute;
    width: 40.8%;
    left: 37.15%;
    top: 22.75%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite;
    animation-delay: 4s;
    z-index: 1;
}
.img-linea-8 {
    position: absolute;
    width: 44.4%;
    left: 35.4%;
    top: 20.4%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite;
    animation-delay: 4.5s;
    z-index: 1;
}
.img-linea-9 {
    position: absolute;
    width: 47.7%;
    left: 33.9%;
    top: 18.4%;
    /* border: solid 1px white; */
    animation: rotate360 20s linear infinite;
    animation-delay: 5s;
    z-index: 1;
}
.img-linea-10 {
    position: absolute;
    width: 48.6%;
    left: 34.8%;
    top: 19.6%;
    z-index: 1;
    /* border: solid 1px white; */
    
}
.img-linea-11 {
    position: absolute;
    width: 51%;
    left: 33.7%;
    top: 19.4%;
    z-index: 1;
    /* border: solid 1px white; */
}
.img-linea-12 {
    position: absolute;
    width: 54%;
    left: 32.2%;
    top: 18.6%;
    z-index: 1;
    /* border: solid 1px white; */
}

.flecha {
    position: absolute;
    z-index: 5;
    top: 60.5%;
    left: 56%;
    scale: 0.9;
    animation: moveFlecha 3s ease-in-out infinite;
}

@keyframes moveFlecha {
    0% {
        transform: translateY(5%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(-5%);
        opacity: 1;
    }
}

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

/* lineas punteadas */

@keyframes redFilterAnimation {
    0% {
        filter: none;
    }
    100% {
        filter: invert(0.1) hue-rotate(-50deg) saturate(10);
    }
}

.punteada-1 {
    position: absolute;
    top: 50.5%;
    left: 25.1%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-2 {
    position: absolute;
    top: 38%;
    left: 26.5%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-3 {
    position: absolute;
    top: 27%;
    left: 30.2%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-4 {
    position: absolute;
    top: 16.5%;
    left: 36%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-5 {
    position: absolute;
    top: 9.7%;
    left: 46.5%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-6 {
    position: absolute;
    top: 7.7%;
    left: 55.7%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-7 {
    position: absolute;
    top: 9.6%;
    left: 61.7%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-8 {
    position: absolute;
    top: 17.8%;
    left: 68.5%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-9 {
    position: absolute;
    top: 31.5%;
    left: 76.2%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-10 {
    position: absolute;
    top: 51.7%;
    left: 81.5%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}

.punteada-13 {
    position: absolute;
    top: 42%;
    left: 80.7%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-11 {
    position: absolute;
    top: 68%;
    left: 80.2%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}
.punteada-12 {
    position: absolute;
    top: 84.5%;
    left: 72%;
    scale: 0.8;
    z-index: 0;
    animation: redFilterAnimation 5s infinite alternate;
}

button {
    background-color: white;
    width: 51px;
    height: 51px;
    border: none;
    border-radius: 100px !important;
    z-index: 2;
    opacity: 1;
    
}

button:hover {
    background-color: rgb(216, 222, 228);
    scale: 1.2;
}

.btn-pagos-mayores {
   position: absolute;
   left: 23.8%;
   top: 48%;
   animation: redFilterAnimation 2s infinite alternate;
}

.btn-guardarropas {
    position: absolute;
    left: 25.6%;
    top: 34.5%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 1s;
}

.btn-campanias {
    position: absolute;
    left: 29.8%;
    top: 23%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 1.5s;
}

.btn-club {
    position: absolute;
    left: 36%;
    top: 14.5%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 2s;
}

.btn-ingresosPilar {
    position: absolute;
    left: 44%;
    top: 8%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 2.5s;
}

.btn-ingresosLuxor {
    position: absolute;
    left: 55%;
    top: 5.8%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 3s;
}

.btn-cortesias {
    position: absolute;
    left: 64.5%;
    top: 8%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 3.5s;
}

.btn-parking {
    position: absolute;
    left: 75%;
    top: 16%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 4s;
}

.btn-qrcajas {
    position: absolute;
    left: 85.5%;
    top: 41%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 4s;
}

.btn-asistencia {
    position: absolute;
    left: 83.2%;
    top: 31%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 4.5s;
}

.btn-aforo {
    position: absolute;
    left: 85.5%;
    top: 52.2%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 5s;
}

.btn-blacklist {
    position: absolute;
    left: 82.2%;
    top: 69.2%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 5.5s;
}

.btn-eyoasis {
    position: absolute;
    left: 74.5%;
    top: 82%;
    animation: redFilterAnimation 2s infinite alternate;
    animation-delay: 6s;
}

.circulo-linea {
    position: absolute;
    width: 40rem;
    height: 40rem;
    border: solid 0.3rem ;
    color: #8FB7BA;
    top: 9%;
    left: 26%;
    border-radius: 100rem;
}

.circulo-id {
    z-index: 2;
    background-color: red;
    position: absolute;
    width: 11.2rem;
    height: 11.2rem;
    border-radius: 100rem;
    left: 49%;
    top: 38%;
    opacity: 0;
    animation: pulseOpacity 2s infinite;

}

.circulo-central {
    z-index: 2;
    background-color: white;
    position: absolute;
    width: 11.2rem;
    height: 11.2rem;
    border-radius: 100rem;
    left: 49%;
    top: 38%;
    display: flex;
    align-items: center;
    justify-content: center;
}



@keyframes pulseOpacity {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 0;
    }
}

/* primera parte */

.contenedor-1 {
    background-color: #036066;
    height: 100vh;
}

.logoCPD {
    margin-left: 10% ;
    margin-top: 2%;
    transform: scale(0.8);
}

.img-titulo {
    margin-top: 35%;
    margin-left: 10%;
}
.cajaInfo {
    margin-top:7%;
    position: relative;
}
.cuadro {
    position: absolute;
    margin-top: 2%;
    margin-left: 2%;
    scale: 0.7;
}
.nivel {
    position: absolute;
    scale: 0.7;
    left: 12%;
    margin-top: 8.5%;
    animation: satuFilterAnimation 5s infinite alternate;
}

@keyframes satuFilterAnimation {
    0% {
        filter: none;
    }
    100% {
        filter: brightness(1) contrast(2) saturate(10) hue-rotate(180deg);
    }
}

.logoOasis {
    position: absolute;
    left: 1%;
    top: 87%;
    transform: scale(0.8);
    padding-top: 2%;
}