.divider:after,
.divider:before {
content: "";
flex: 1;
height: 1px;
background: #eee;
}

.h-custom {
height: calc(100% - 73px);
}

@media (max-width: 450px) {
.h-custom {
height: 100%;
}
}
body {

}
.image-container {
    width: 100%;
    height: 700px;
    background-size: contain; /* Para cubrir todo el elemento */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.footer-container
{
    width: 100%;
    background-size: cover; /* Para cubrir todo el elemento */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.boton-container {
    background-size: cover; /* Para cubrir todo el elemento */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
}

.imagen_jack {
    width: 130px;
    height: 130px;
    background-size: cover; /* Para cubrir todo el elemento */
    background-position: center; /* Centra la imagen en el fondo */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    transition: opacity 0.1s ease-in-out;
}

.fade-out {
    opacity: 0; /* Reduce la opacidad a 0 para ocultar */
}
.fade-in {
    opacity: 1; /* Incrementa la opacidad a 1 para mostrar */
}

@media (min-height: 0px) and (max-height: 696px) {
    .imagen_jack {
        height: 130px;
        width: 130px;
    }

    .footer-container
    {
        visibility: hidden;
    }
}

@media (min-height: 697px) and (max-height: 800px) {
    .imagen_jack {
        height: 160px;
        width: 160px;
    }
}

@media (min-height: 801px) {
    .imagen_jack {
        height: 200px;
        width: 200px;
    }
}

@media (min-width: 0px) and (max-width: 455px)
{
    .footer-container {
        margin-top: 30px;
    }
}

@media (min-width: 455px) and (max-width: 767px)
{
    .footer-container {
        margin-top: 60px;
    }
}

@media (min-width: 768px) and (max-width: 958px)
{
    .footer-container {
        margin-top: 60px;
    }
}

@media (max-width: 768px) {
    .image-container {
        height: auto;
        background-size: cover; /* Para que la imagen se ajuste */
    }

    .footer-container {
        height: auto;
        background-size: cover; /* Para que la imagen se ajuste */
    }

    .boton-container {
        width: 100%;
        padding: 1rem; /* Ajustar el tamaño de los botones */
    }

}

/* Estilos para tabletas */
@media (min-width: 959px)
{


    .footer-container {
        height: auto; /* Ajuste para tablet */
        background-size: cover; /* Para que la imagen se ajuste */
    }

    .boton-container {
        width: 100%;
        padding: 1.5rem;
    }

    .principal {height: 100vh !important;}
}