﻿/* Fuentes usadas
GOOGLE FONTS
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 1000

.roboto-flex-<uniquifier> {
  font-family: "Roboto Flex", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

COLORES
azul
#31498E
	
cyan
#1FC6B9
	
azul claro
#788FC8
*/

body {
    font-family: "Roboto Flex", sans-serif !important;
    font-weight: 400 !important;
    color: #000 !important;
    line-height: 1.4 !important;
    font-size: 120% !important;
}

h1, h2, h3, h4, h5 {
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #1D2A4C;
}

h1 {
    font-size: 180% !important;
}


h2 {
    font-size: 160% !important;
}


h3 {
    font-size: 130% !important;
    font-weight: 600 !important;
}


h4 {
    font-size: 115% !important;
}


ul, li {
    font-size: 100% !important;
    padding-bottom: .2rem;
}


.lead {
    font-size: 115% !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

a {
    color: #31498E;
    text-decoration: underline;
}

    a:hover {
        color: #1FC6B9;
    }



/* BANNER> */
#fBanner {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background: url(images/fondo-call.jpg) center right;
    background-size: cover;
    background-color: #31498E;
    color: #fff;
}
    #fBanner h1 {
        color: #fff;
    }
    #fBanner h2 {
        color: #fff;
        font-size: 125% !important;
        line-height: 1.4 !important;
    }
    #fBanner .lead {
        color: #fff;
    }
    #fBanner .foto {
        width: 8rem;
    }

@media only screen and (max-width: 991px) {

    #fBanner {
        padding-top: 2rem;
        padding-bottom: 2rem;
        background: url(images/fondo-call-movil.jpg) center right;
        background-size: cover;
        background-color: #31498E;
    }
        #fBanner .foto {
            width: 6rem;
        }

}
/* </BANNER> */



/* <TESTIMONIOS> */
#fTestimonios {
    padding-top: 3rem;
    padding-bottom: 0rem;
}

    #fTestimonios h1, #fTestimonios h2, #fTestimonios h3 {
    }

    #fTestimonios p {
    }


    #fTestimonios .columna1 {
    }

    #fTestimonios .columna2 {
    }

    #fTestimonios .card {
        border: none;
    }

    #fTestimonios .card-body {
        padding-bottom: 0rem;
    }

    #fTestimonios .card p {
    }

        #fTestimonios .card p .fa-star, #fTestimonios .card p .fa-star-half-stroke {
            color: #FCCD43 !important;
            padding-right: .1rem;
        }

        #fTestimonios .card .comentario {
        }

        #fTestimonios .autor {
            font-weight: 700;
        }
            #fTestimonios .autor::before {
                content: "—";
            }

        .triangle-down {
        }



#fTestimonios .carousel-indicators > li {
    border-radius: 50%;
}

#fTestimonios .carousel-indicators li {
    width: 11px !important;
}

#fTestimonios .navegacion {
    padding-bottom: 1rem;
}

    #fTestimonios .navegacion a {
        font-weight: bold;
        text-decoration: none;
    }

        #fTestimonios .navegacion a:hover {
            color: #1FC6B9;
            text-decoration: underline;
        }

#CarouselInner .my-new-list {
    padding-left: 0px;
}


@media only screen and (max-width: 991px) {

    #fTestimonios {
        padding-top: 2rem;
        padding-bottom: 1rem;
    }
        #fTestimonios .renglon1 {
            padding-bottom: 2rem;
        }
        #fTestimonios .columna1 {
            padding-right: 1rem;
        }

        #fTestimonios .columna2 {
            padding-left: 1rem;
        }
        #fTestimonios .autor {
            margin-bottom: 4rem;
        }
}
/* </TESTIMONIOS> */


/* <FAQS> */
#fFaqs {
    padding-bottom: 4rem;
}

    #fFaqs .card {
        border: 1px solid #CCE5FF !important;
    }

    #fFaqs .card-header {
        padding: 0rem .5rem;
        background-color: rgba(204, 229, 255, .3) !important;
        border-bottom: 1px solid #CCE5FF !important;
    }

    #fFaqs .btn {
        padding: 1rem 1rem 0rem 1rem;
        color: #31498E;
        font-weight: 700 !important;
        font-size: 80%;
    }



/* </FAQS> */


/* <EL DOCTOR> */
#fDoctor {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #31498E;
    color: #fff;
}

    #fDoctor h1, #fDoctor h2, #fDoctor h3 {
        color: #fff;
    }

/* </EL DOCTOR> */


/* <UBICACION> */
#fUbicacion {
    padding-top: 4rem;
    padding-bottom: 4rem;
}


/* </UBICACION> */


/* <ASEGURADORAS> */
#fAseguradoras {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #31498E;
    color: #fff;
}

    #fAseguradoras h1 {
        color: #fff;
    }

    #fAseguradoras .foto {
        margin-bottom: 2rem;
        border-radius: .5rem;
    }

/* </ASEGURADORAS> */


/* <PAGO> */
#fPago {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: rgba(204, 229, 255, .3) !important;
}
    #fPago .foto {
        padding-right: 2rem;
        padding-left: 2rem;
        border-radius: .5rem;
    }

@media only screen and (max-width: 991px) {

    #fPago .foto {
        padding-right: 1rem;
        padding-left: 1rem;
    }

}
/* </PAGO> */



/* <DEL DOCTOR COMPLEMENTO> */
#fDoctorComplemento {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

    #fDoctorComplemento .foto {
        padding: 2rem;
        padding: 2rem;
    }

@media only screen and (max-width: 991px) {

    #fDoctorComplemento .foto {
        padding: 1rem;
    }
}
/* </DEL DOCTOR COMPLEMENTO> */



/* <DESTADADO> */
#fDestacado {
    padding-bottom: 2rem;
}

@media only screen and (max-width: 991px) {
}
/* </DESTADADO> */




/* <SERVICIOS> */
#fServicios {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: rgba(204, 229, 255, .3) !important;
}

@media only screen and (max-width: 991px) {

}
/* </SERVICIOS> */




/* <CONTACTO> */
#fContacto {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: #31498E;
    color: #fff;
}

    #fContacto h1, #fContacto h2, #fContacto h3 {
        color: #fff;
    }

/* </CONTACTO> */



/* <PIE> */
#fPie {
    padding-top: 3rem;
    padding-bottom: 2rem;
    background-color: rgba(204, 229, 255, 1) !important;
}
   


@media only screen and (max-width: 991px) {

    #fPie {
        text-align: center;
        padding-bottom: 3rem;
    }

}
/* </PIE> */


/* <VARIOS> */
.vinetaAzul {
    color: #31498E !important;
    padding-right: .2rem;
}

.textoAzul {
    color: #1D2A4C !important;
}
.textoCyan {
    color: #25C8BC !important;
}

.textoAmarillo {
    color: #FCCD43;
}

li::marker {
    color: #788FC8;
}
/* </VARIOS> */


/* <BOTONES> */
.btn {
    padding: 1rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    margin-bottom: 1rem;
    font-weight: 500 !important;
    font-size: 100%;
    border: none;
}


.btn-primary {
    background-color: #31498E;
}

    .btn-primary:hover {
        background-color: #20C7BA !important;
    }

.btn-secondary {
    background-color: #171E4A;
}

    .btn-secondary:hover {
        background-color: #20C7BA !important;
    }

/* </BOTONES> */


/* <WHATSAPP> */
.float {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 15px;
    right: 25px;
    background-color: #1CC33D;
    color: #FFF !important;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    z-index: 100;
}

    .float:hover {
        color: #FFF;
        background-color: #12DE3B;
    }

.my-float {
    margin-top: 10px;
}


@media only screen and (max-width: 991px) {

    .float {
        right: 20px;
    }
}
/* </WHATSAPP> */