/*PADDING PARA EVITAR QUE LA NAVBAR CUBRA UNA PORCIÓN*/
/*####HOJA DE ESTILO PARA LANDING JDSUITE####*/
body{
    image-rendering: -webkit-optimize-contrast;
}
/******** GENERAL ***********/
.fondo-jdinvoice{
    background: url('../images/PORTADA\ IMAGEN.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
}
.texto-factura-invoice{
    font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    line-height: 2.9rem;
    letter-spacing: 1rem;
    text-shadow: rgba(61, 58, 58, 0.89) -4px 4px 4px;
}
.texto-factura-invoice span{
    font-size: 2.1rem;
    text-decoration-line: underline;
    letter-spacing: 0.45rem;
}

.frow{
    max-width: 100%;
    clear: both;
    align-content: center;
    display: table;
    display: flex;
    align-items: center;
}
.margen-contacta:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.card1 {
    background-color: rgba(180, 180, 180, 0.425);
    height: auto;
    width: auto;
    border-radius: 5px;
}
.title-form-cont{
    height: auto;
    width: auto;
    background-color: rgba(180, 180, 180, 0.425);
    padding: .4em;
    border-radius: 5px;
}
.title-form{
    text-align: center;
    font-size: large;
    font-weight: 600;
}
.card1 form label{
    margin-bottom: -0.2rem;
}
.card1 form input,
.card1 form textarea{
    width: 100%;
    height: min-content;
    padding: .2em;
    margin-bottom: -0.9rem;
    border: none;
    font-size: 10pt;
    background-color: rgb(255, 255, 255);
    outline: 0;
    color: #000;
    border-bottom: 1px solid #4d4c4c;
}
.card1 form button{
    margin-bottom: -0.9rem;
    margin-top: 0.5rem;
}
/******** SEGUNDA SECCION DE BENEFICIOS ********/
.conte{
    position: relative;
    display: inline-block;
    text-align: center;
}

.centrado{
    position: absolute;
    top: 60%;
    left: 76%;
    transform: translate(-50%, -50%);
}
.imagen-beneficios{
    width: 25%;
    height: auto;
}
.centrado1{
    position: absolute;
    color: #fff;
    text-decoration-color: #fff;
    top: 75%;
    left: 75%;
    transform: translate(-50%, -50%);
}
.texto-beneficios{
    color: #fff;
    text-decoration-line: underline;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
}
.texto-beneficios:hover{
    font-size: 19px;
    text-shadow: rgba(82, 77, 77, 0.89) -4px 4px 8px;
}
/******** FIN SEGUNDA SECCION DE BENEFICIOS ********/
.borde-color{
    border: 2px solid black;
}
/**** TITULOS ****/
.titular-invoice {
    background-color: #28badbff;
    height: 70px;
    color: #fff;
    display: flex;
    justify-content: center;
}

.texto-titular-invoice {

    font-size: xxx-large;
    text-decoration-line: underline;
}
/**** FIN TITULOS ****/

/******** ESTILOS PRIMER SLIDER BENEFICIOS GENERAL ********/
.owl-theme .owl-controls{
    margin-top: 10px;
}
.owl-theme .owl-controls .owl-page span{
    background: #bdc2c2;
    opacity: 1;
    transition: all 0.4s ease 0s;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    background: #28badbff;
}
.owl-theme .owl-controls .owl-page.active span{
    width: 22px;
    height: 12px;
}

.imagen-bene{
    width: 75%;
    height: auto;
}
.slider-cover{
    width: 100%;
    height: 50vw;
    object-fit: cover;
}
/******** FIN ESTILOS PRIMER SLIDER BENEFICIOS GENERAL ********/

/******** ESTILOS LICENCIAS GENERAL ********/
.licencias{
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -40%);
    max-height: 4rem;
}
.licencias img{
    height: 79%;
    width: auto;
    margin-left: 8%;
    margin-top:3%;
}
.licencias button{
    max-height: 3rem;
    padding: 0.5;
    align-content: center;
    margin-right: -44%;
}
.licencias img:hover{
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
/******** FIN ESTILOS LICENCIAS GENERAL ********/

.titular-invoice {
    background-color: #28badbff;
    height: 70px;
    color: #fff;
    display: flex;
    justify-content: center;
}

.texto-titular-invoice {

    font-size: xxx-large;
    text-decoration-line: underline;
}

/* REDES */
.img-redes{
    TEXT-ALIGN: center;
}
/* FIN REDES */

@media screen and (max-width:767.98px)
{
    /** Primer sección móvil **/
    .fondo-jdinvoice{
        padding: 0 0 5% 0;
    }
    .fondo-jdinvoice{
        background-position: right;
    }
    .img-jdinvoice{
        width: 50%;
        height: auto;
    }
    .margen-contacta{
        margin-top: 0rem;
    }
    .texto-factura-invoice{
        font-family: 'Roboto', sans-serif;
        font-size: 2.68rem;
        font-weight: 700;
        line-height: 2.3rem;
        letter-spacing: 0.3rem;
        text-shadow: rgba(61, 58, 58, 0.89) -4px 4px 4px;
    }
    .texto-factura-invoice span{
        font-size: 0.99rem;
        text-decoration-line: underline;
        letter-spacing: 0.15rem;
        text-shadow: rgba(37, 37, 37, 0.89) -4px 4px 4px;
    }
    /** FIN Primer sección móvil **/
    /* TITULOS */
    .texto-titular-invoice {
        font-size: x-large;
        text-decoration-line: underline;
    }
/* FIN TITULOS */
    /******** ESTILOS PRIMER SLIDER MOVIL ********/
    .fondo-jdsuite{
        padding:0 0 5% 0
    }
    .fondo-jdsuite{
        background-position:left
    }
    .slider-cover{
    width: 100%;
    height: 70vw;
    object-fit: cover;
    }
    /******** FIN ESTILOS PRIMER SLIDER MOVIL ********/
    /******** ESTILOS CARRUSEL BENEFICIOS MOVIL ********/
    .imagen-bene{
        width: 100%;
        height: auto;
    }
    /******** ESTILOS CARRUSEL BENEFICIOS MOVIL ********/
    /******** SEGUNDA SECCIÓN BENEFICIOS MOVIL ********/
    .img-precios{
        min-height: 8rem;
    }
    .centrado{
        position: absolute;
        top: 58%;
        left: 76%;
        transform: translate(-50%, -50%);
    }
    .imagen-beneficios{
        width: 24%;
        height: auto;
    }
    .centrado1{
        position: absolute;
        color: #fff;
        text-decoration-color: #fff;
        top: 79%;
        left: 65%;
        transform: translate(-50%, -50%);
    }
    .texto-beneficios{
        color: #fff;
        text-decoration-line: underline;
        font-family: 'Roboto', sans-serif;
        font-size: 10px;
        letter-spacing: 0.1rem;
    }
    /******** FIN SEGUNDA SECCIÓN BENEFICIOS MOVIL ********/
/* TITULOS */
.texto-titular-invoice {
    font-size: x-large;
    text-decoration-line: underline;
}
/* FIN TITULOS */

/* REDES SOCIALES */
.content-redes {
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10%, 15%));
    /* grid-template-columns: repeat(2, 1fr); */
    /* grid-gap: 20px; */
    /* Margen entre los elementos */
    max-width: 100%;
}
/* FIN REDES SOCIALES */

/* REQUISITOS */
    .content-requisitos {
        grid-template-columns: repeat(1, 1fr);
        max-width: 80%;
    }

    .requisitos{
        margin-top: -15%;
    }
    .requisitos-img1, .requisitos-img3, .requisitos-img5, .requisitos-img7,
    .requisitos-img2, .requisitos-img4, .requisitos-img6, .requisitos-img8{
        text-align: end;
    }
    .requisitos-img7{
        margin-left: -10px;
        margin-right: 10px;
    }
    .boton-requisitos{
        cursor: pointer;
        margin-top: -10%;
        margin-left: -22%;
}
/**** FIN ESTILOS REQUISITOS  ****/

}

@media screen and (min-width:768px) and (max-width:991.98px)
{
    /** Primer sección **/
    .fondo-jdinvoice{
        padding:0 0 5% 0;
    }
    .img-jdinvoice{
        width: 65%;
        height: auto;
    }
    /** FIN Primer sección **/
    .texto-titular-invoice {
        font-size: xx-large;
        text-decoration-line: underline;
    }
    /* REDES SOCIALES */
    .content-redes {
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10%, 140px));
        /* grid-template-columns: repeat(2, 1fr); */
        /* grid-gap: 20px; */
        /* Margen entre los elementos */
        max-width: 100%;
    }
    /* FIN REDES SOCIALES */

    /**** ESTILOS REQUISITOS  ****/
    .content-requisitos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-gap: 20px; */
        /* Margen entre los elementos */
        max-width: 90%;
        padding: 10px;
        margin: auto;
    }
    .requisitos{
        margin-top: -15%;
    }
    .requisitos-img1, .requisitos-img3, .requisitos-img5, .requisitos-img7{
        text-align: end;
    }
    .requisitos-img7{
        margin-left: -10px;
        margin-right: 10px;
    }
    .boton-requisitos{
        cursor: pointer;
        margin-top: -6%;
        margin-left: -8%;
    }
    /**** FIN ESTILOS REQUISITOS  ****/

}

@media screen and (min-width:992px)
{
    /** Primer sección **/
    .fondo-jdinvoice{
        min-height:640px
    }
    .img-jdinvoice{
        width: 50%;
        height: auto;
    }
    .margen-contacta{
        margin-top: 0rem;
    }
    .button-solicita{
        width: 75%;
        height: auto;
        
    }
    /** FIN Primer sección **/
/* REDES SOCIALES */
    .content-redes {
        cursor: pointer;
        justify-content: center;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(10%, 140px));
        /* grid-template-columns: repeat(2, 1fr); */
        /* grid-gap: 20px; */
        /* Margen entre los elementos */
        max-width: 100%;
    }

    .img-redes:hover{
        opacity: .8;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        transition: .2s;
    }
/* FIN REDES SOCIALES */

    /**** ESTILOS REQUISITOS  ****/
    .content-requisitos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* grid-gap: 20px; */
        /* Margen entre los elementos */
        max-width: 90%;
        padding: 10px;
        margin: auto;
    }

    .requisitos{
        margin-top: -15%;
    }

    .requisitos-img1, .requisitos-img3, .requisitos-img5, .requisitos-img7{
        text-align: end;
    }
    .requisitos-img7{
        margin-left: -10px;
        margin-right: 10px;
    }

    .requisitos-img8{
        cursor: pointer;
        margin-top: -6%;
        margin-left: -8%;
    }

    .requisitos-img8:hover {
        opacity: .9;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
        margin-left: 2%;
        transition: .2s;
        }
    /**** FIN ESTILOS REQUISITOS  ****/

}