.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-color: #fff;

}

.slider {
    display: flex;
    flex-direction: column;
    /* Change the flex direction to stack elements vertically */
    width: 400px;
    height: 300px;
}


.slide {
    /* Resto de estilos existentes */
    /* ... */
    /* Propiedades de la transición */
    transition: opacity 0.2s ease, transform 0.3s ease;
    opacity: 0;
    /* Establecer la opacidad inicial en 0 (oculto) */
    transform: translateY(20px);
    /* Aplicar una transformación para desplazar ligeramente el contenido hacia abajo */
}

.slide.active {
    opacity: 1;
    /* Mostrar el contenido con opacidad completa cuando esté activo */
    transform: translateY(0);
    /* Devolver el contenido a su posición original */
}

/* Clase para activar la transición */
.transition .slide {
    opacity: 0;
    /* Establecer la opacidad en 0 para ocultar el contenido */
    transform: translateY(-20px);
    /* Desplazar el contenido hacia arriba para ocultarlo */
}

.image-container,
.text-container {
    position: absolute;
    /* Agrega el posicionamiento absoluto a la imagen y al texto */
}

.image-container {
    max-width: 100%;
    /* Redimensiona las imágenes para ajustarse al contenedor */

}

/* Si deseas mantener una altura fija en las imágenes */
.image-container img {
    width: 100%;
    height: auto;
    /* Para mantener la proporción original de la imagen */
}

.text-container {
    text-align: justify;
}

.prev-btn,
.next-btn {
    /* Estilos existentes para el botón "Siguiente" */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    font-size: 24px;
    cursor: pointer;
    background-color: transparent;
    opacity: 0.7;
    border: none;
    /* Nuevos estilos para el efecto hover */
    transition: opacity 0.3s ease;
    /* Transición suave de la opacidad durante 0.3 segundos */
}

.next-btn:hover {
    opacity: 1;
    /* Cambiar la opacidad al 100% (sin transparencia) al hacer hover */
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.posicion-text {
    position: absolute;
    top: 60px;
    left: -450px;
}

.posicion-img {
    position: absolute;
    top: -60px;
    right: -590px;
}

.titulo1 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 300px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo2 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 300px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo3 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 300px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo4 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 210px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo5 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 310px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo6 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 280px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo7 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 300px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo8 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 380px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}

.titulo9 {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: #575756;
    position: absolute;
    font-size: 22px;


    top: -30px;
    /* Agrega el valor de posicionamiento vertical inicial */
    left: 300px;
    /* Agrega el valor de posicionamiento horizontal inicial */
}



@media only screen and (max-width: 1440px) {

    .slider-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        background-color: #fff;
    
    }
    
    .slider {
        display: flex;
        flex-direction: column;
        /* Change the flex direction to stack elements vertically */
        width: 400px;
        height: 300px;
    }
    
    
    .slide {
        /* Resto de estilos existentes */
        /* ... */
        /* Propiedades de la transición */
        transition: opacity 0.2s ease, transform 0.3s ease;
        opacity: 0;
        /* Establecer la opacidad inicial en 0 (oculto) */
        transform: translateY(20px);
        /* Aplicar una transformación para desplazar ligeramente el contenido hacia abajo */
    }
    
    .slide.active {
        opacity: 1;
        /* Mostrar el contenido con opacidad completa cuando esté activo */
        transform: translateY(0);
        /* Devolver el contenido a su posición original */
    }
    
    /* Clase para activar la transición */
    .transition .slide {
        opacity: 0;
        /* Establecer la opacidad en 0 para ocultar el contenido */
        transform: translateY(-20px);
        /* Desplazar el contenido hacia arriba para ocultarlo */
    }
    
    .image-container,
    .text-container {
        position: absolute;
        /* Agrega el posicionamiento absoluto a la imagen y al texto */
    }
    
    .image-container {
        max-width: 100%;
        /* Redimensiona las imágenes para ajustarse al contenedor */
    
    }
    
    /* Si deseas mantener una altura fija en las imágenes */
    .image-container img {
        width: 100%;
        height: auto;
        /* Para mantener la proporción original de la imagen */
    }
    
    .text-container {
        text-align: justify;
    }
    
    .prev-btn,
    .next-btn {
        /* Estilos existentes para el botón "Siguiente" */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        font-size: 24px;
        cursor: pointer;
        background-color: transparent;
        opacity: 0.7;
        border: none;
        /* Nuevos estilos para el efecto hover */
        transition: opacity 0.3s ease;
        /* Transición suave de la opacidad durante 0.3 segundos */
    }
    
    .next-btn:hover {
        opacity: 1;
        /* Cambiar la opacidad al 100% (sin transparencia) al hacer hover */
    }
    
    .prev-btn {
        left: 20px;
    }
    
    .next-btn {
        right: 20px;
    }
    
    .posicion-text {
        position: absolute;
        top: 60px;
        left: -450px;
    }
    
    .posicion-img {
        position: absolute;
        top: -60px;
        right: -450px;
    }
    
    .titulo1 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo2 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo3 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo4 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 210px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo5 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 310px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo6 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 280px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo7 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo8 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 380px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo9 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
}

@media screen and (max-width: 1366px){
    .slider-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        background-color: #fff;
    
    }
    
    .slider {
        display: flex;
        flex-direction: column;
        /* Change the flex direction to stack elements vertically */
        width: 400px;
        height: 300px;
    }
    
    
    .slide {
        /* Resto de estilos existentes */
        /* ... */
        /* Propiedades de la transición */
        transition: opacity 0.2s ease, transform 0.3s ease;
        opacity: 0;
        /* Establecer la opacidad inicial en 0 (oculto) */
        transform: translateY(20px);
        /* Aplicar una transformación para desplazar ligeramente el contenido hacia abajo */
    }
    
    .slide.active {
        opacity: 1;
        /* Mostrar el contenido con opacidad completa cuando esté activo */
        transform: translateY(0);
        /* Devolver el contenido a su posición original */
    }
    
    /* Clase para activar la transición */
    .transition .slide {
        opacity: 0;
        /* Establecer la opacidad en 0 para ocultar el contenido */
        transform: translateY(-20px);
        /* Desplazar el contenido hacia arriba para ocultarlo */
    }
    
    .image-container,
    .text-container {
        position: absolute;
        /* Agrega el posicionamiento absoluto a la imagen y al texto */
    }
    
    .image-container {
        max-width: 100%;
        /* Redimensiona las imágenes para ajustarse al contenedor */
    
    }
    
    /* Si deseas mantener una altura fija en las imágenes */
    .image-container img {
        width: 100%;
        height: auto;
        /* Para mantener la proporción original de la imagen */
    }
    
    .text-container {
        text-align: justify;
    }
    
    .prev-btn,
    .next-btn {
        /* Estilos existentes para el botón "Siguiente" */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        font-size: 24px;
        cursor: pointer;
        background-color: transparent;
        opacity: 0.7;
        border: none;
        /* Nuevos estilos para el efecto hover */
        transition: opacity 0.3s ease;
        /* Transición suave de la opacidad durante 0.3 segundos */
    }
    
    .next-btn:hover {
        opacity: 1;
        /* Cambiar la opacidad al 100% (sin transparencia) al hacer hover */
    }
    
    .prev-btn {
        left: 20px;
    }
    
    .next-btn {
        right: 20px;
    }
    
    .posicion-text {
        position: absolute;
        top: 60px;
        left: -450px;
    }
    
    .posicion-img {
        position: absolute;
        top: -10px;
        right: -450px;
    }
    
    .titulo1 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo2 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo3 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo4 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 210px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo5 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 310px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo6 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 280px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo7 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo8 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 380px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    
    .titulo9 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;
    
    
        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }
    

}

@media only screen and (max-width: 1024px) {


    .slider-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50vh;
        background-color: #fff;
    }

    .slider {
        display: flex;
        flex-direction: column;
        /* Change the flex direction to stack elements vertically */
        width: 400px;
        height: 300px;
    }


    .slide {
        /* Resto de estilos existentes */
        /* ... */
        /* Propiedades de la transición */
        transition: opacity 0.2s ease, transform 0.3s ease;
        opacity: 0;
        /* Establecer la opacidad inicial en 0 (oculto) */
        transform: translateY(20px);
        /* Aplicar una transformación para desplazar ligeramente el contenido hacia abajo */
    }

    .slide.active {
        opacity: 1;
        /* Mostrar el contenido con opacidad completa cuando esté activo */
        transform: translateY(0);
        /* Devolver el contenido a su posición original */
    }

    /* Clase para activar la transición */
    .transition .slide {
        opacity: 0;
        /* Establecer la opacidad en 0 para ocultar el contenido */
        transform: translateY(-20px);
        /* Desplazar el contenido hacia arriba para ocultarlo */
    }

    .image-container,
    .text-container {
        position: absolute;
        /* Agrega el posicionamiento absoluto a la imagen y al texto */
    }

    .image-container {
        max-width: 100%;
        height: auto;
    }

    /* Si deseas mantener una altura fija en las imágenes */
    .image-container img {
        width: 70%;
        height: auto;
        /* Para mantener la proporción original de la imagen */
    }

    .text-container {
        text-align: justify;
    }

    .prev-btn,
    .next-btn {
        /* Estilos existentes para el botón "Siguiente" */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        font-size: 24px;
        cursor: pointer;
        background-color: transparent;
        opacity: 0.7;
        border: none;
        /* Nuevos estilos para el efecto hover */
        transition: opacity 0.3s ease;
        /* Transición suave de la opacidad durante 0.3 segundos */
    }

    .next-btn:hover {
        opacity: 1;
        /* Cambiar la opacidad al 100% (sin transparencia) al hacer hover */
    }

    .prev-btn {
        left: 0;
    }

    .next-btn {
        right: 0;
    }

    .posicion-text {
        position: absolute;
        top: 60px;
        left: -250px;
    }

    .posicion-img {
        position: absolute;
        top: 10px;
        right: -420px;
    }

    .titulo1 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo2 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo3 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo4 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 210px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo5 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 310px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo6 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 280px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo7 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo8 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 380px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }

    .titulo9 {
        font-family: 'Poppins', sans-serif;
        font-weight: bold;
        color: #575756;
        position: absolute;
        font-size: 22px;


        top: -30px;
        /* Agrega el valor de posicionamiento vertical inicial */
        left: 300px;
        /* Agrega el valor de posicionamiento horizontal inicial */
    }


}


@media (max-width: 900px) {

    .posicion-text-container {
        position: relative;
        /* Asegúrate de que el contenedor tenga posición relativa */
        overflow: hidden;
        /* Evita que el contenido de .posicion-text se desborde */
    }

    .text-container {
        text-align: justify;
        width: 250px;

    }

    .posicion-text {
        left: 78px;
        top: -5px;
        font-size: 10px;
    }

    .posicion-img {
        right: 70px;
        /* Ajustar el valor de posicionamiento horizontal */
        top: 230px;
        margin-left: 90px;
        /* Ajustar el valor de posicionamiento vertical */
    }


    /* Si deseas mantener una altura fija en las imágenes */
    .image-container img {
        width: 98%;
        height: auto;
        /* Para mantener la proporción original de la imagen */
    }



    /* Estilos para los títulos (ajustar según tus necesidades) */
    .titulo1 {
        left: 80px;
        top: -20px;
        font-size: 10px;

    }

    .titulo2 {
        left: 80px;
        top: -30px;
        font-size: 10px;

    }

    .titulo3 {
        left: 80px;
        top: -30px;
        font-size: 10px;

    }

    .titulo4 {
        left: 50px;
        top: -30px;
        font-size: 10px;

    }

    .titulo5 {
        left: 100px;
        top: -30px;
        font-size: 10px;

    }

    .titulo6 {
        left: 85px;
        top: -30px;
        font-size: 10px;

    }

    .titulo7 {
        left: 97px;
        top: -30px;
        font-size: 10px;

    }

    .titulo8 {
        left: 110px;
        top: -30px;
        font-size: 10px;

    }

    .titulo9 {
        left: 90px;
        top: -30px;
        font-size: 10px;

    }
}

@media only screen and (max-width: 320px) {

    .posicion-text-container {
        position: relative;
        /* Asegúrate de que el contenedor tenga posición relativa */
        overflow: hidden;
        /* Evita que el contenido de .posicion-text se desborde */
    }

    .text-container {
        text-align: justify;
        width: 250px;

    }

    .posicion-text {
        left: 38px;
        top: -5px;
        font-size: 10px;
    }

    .posicion-img {
        right: -1px;
        /* Ajustar el valor de posicionamiento horizontal */
        top: 230px;
        margin-left: 50px;
        /* Ajustar el valor de posicionamiento vertical */
    }


    /* Si deseas mantener una altura fija en las imágenes */
    .image-container img {
        width: 78%;
        height: auto;
        /* Para mantener la proporción original de la imagen */
    }

    /* Estilos para los títulos (ajustar según tus necesidades) */
    .titulo1 {
        left: 80px;
        top: -20px;
        font-size: 10px;

    }

    .titulo2 {
        left: 80px;
        top: -30px;
        font-size: 10px;

    }

    .titulo3 {
        left: 80px;
        top: -30px;
        font-size: 10px;

    }

    .titulo4 {
        left: 50px;
        top: -30px;
        font-size: 10px;

    }

    .titulo5 {
        left: 100px;
        top: -30px;
        font-size: 10px;

    }

    .titulo6 {
        left: 85px;
        top: -30px;
        font-size: 10px;

    }

    .titulo7 {
        left: 97px;
        top: -30px;
        font-size: 10px;

    }

    .titulo8 {
        left: 110px;
        top: -30px;
        font-size: 10px;

    }

    .titulo9 {
        left: 90px;
        top: -30px;
        font-size: 10px;

    }
}