/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3/05/2023, 01:38:42 PM
    Author     : pcgc7
*/


body { font-family: 'Open Sans', sans-serif; }

/* Encabezado */
header { background-image: linear-gradient(to right, #fff 0%, #a12312 100%); box-shadow: 0 0.75em 0.75em 0 rgba(0,0,0,0.5); z-index: 30; }
header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
header .p-4 { padding: 1em !important; }

/* Menú */
.menu { display: flex; justify-content: center; border-top: none; }
.menu ul { display: flex; flex-direction: row; }
.menu ul li { font-size: 1em !important; margin: 0 2.5em; }
.menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }

/* Inicio */
.imagenFondo { background-image: url('../imgInicio/fondoInicio.jpg'); background-size: cover; min-height: 100vh; padding-top: 2rem; }
.fondoCaption { right: 12.5%; bottom: 0; left: 12.5%; padding: 16em 2em 3em 2em; background-color: rgba(0,0,0,0.5); }
.colorFondo { background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; }
.jumbotron { padding: 2em !important; margin-bottom: 3em !important; margin-left: 2em !important; margin-right: 2em !important; }
.jumbotron .display-4 { font-size: 3em !important; }
.jumbotron .lead { font-size: 1.5em !important; }
.inicio .p-3 { padding: 1em !important; }

/* Especialidades */
.especialidades h1 { font-size: 2.5em; }
.card { width: 15% !important; }
.card-title { font-size: 1.25em !important; }
.card-text { font-size: 0.85em !important; }
.card-footer .btn { font-size: 1em; }

/* Historia */
.historia { background-image: linear-gradient(to left, #fff 0%, #a12312 100%); }
.historia h1 { font-size: 2.5em; }
.historia h2 { font-size: 1.75em; }
.historia p { font-size: 1em; }
.imgHistoria { width: 95%; }

/* Comentarios */
.tcomentarios h1 { font-size: 2.5em; }
.tcomentarios h4 { font-size: 1.5em; }
label { font-size: 0.85em !important; }
.comentarios .btn { font-size: 0.85em; }
.imgPersona { width: 15% !important; }

/* Pie de página */
footer h5 { font-size: 1.25em !important; }
footer a, footer ul li, .copyright { font-size: 0.8em !important; }
footer .p-4 { padding: 1.25em !important; }
footer .py-3 { padding-top: 0.75em !important; padding-bottom: 0.75em !important; }


/*********************** Estilos para las validaciones en PHP *****************/

.error { background-color: #cc0000; color: #fff; }
.correcto { background-color: #1ed12d; }
.error, .correcto { font-size: 0.8em; padding: 1em; font-weight: 600; margin: 0.35em 0; }

/*********************** Estilos para las validaciones en Javascript *****************/

.msgIncorrecto { color: #cc0000; font-size: 0.5rem; }
.msgCorrecto { color: #1ed12d; font-size: 0.5rem; }

/*********************************** MEDIA QUERIES ***********************************/

@media screen and (min-width: 1424px) and (max-width: 1647.98px) {

    /* Encabezado */
    header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 1em !important; margin: 0 2em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 3em !important; margin-left: 1em !important; margin-right: 1em !important; }
    .jumbotron .display-4 { font-size: 2.75em !important; }
    .jumbotron .lead { font-size: 1.25em !important; }
    .inicio .p-3 { padding: 0.75em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 2.5em; }
    .card { width: 15% !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.85em !important; }
    .card-footer .btn { font-size: 1em; }
    
    /* Historia */
    .historia h1 { font-size: 2.5em; }
    .historia h2 { font-size: 1.75em; }
    .historia p { font-size: 1em; }
    .imgHistoria { width: 95%; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 2.5em; }
    .tcomentarios h4 { font-size: 1.5em; }
    label { font-size: 0.85em !important; }
    .comentarios .btn { font-size: 0.85em; }
    .imgPersona { width: 15% !important; }
    
    /* Pie de página */
    footer h5 { font-size: 1.25em !important; }
    footer a, footer ul li, .copyright { font-size: 0.8em !important; }
    footer .p-4 { padding: 1.25em !important; }
    footer .py-3 { padding-top: 0.75em !important; padding-bottom: 0.75em !important; }
}

@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    header .col-xl-4 { padding-left: 0; padding-right: 0; max-width: 20% }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 1em !important; margin: 0 1.4em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 2em !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 2.5em !important; }
    .jumbotron .lead { font-size: 1.25em !important; }
    .inicio .p-3 { padding: 0.75em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 2.4em; }
    .card { width: 31% !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.85em !important; }
    .card-footer .btn { font-size: 0.85em; }
    
    /* Historia */
    .historia h1 { font-size: 2.4em; }
    .historia h2 { font-size: 1.75em; }
    .historia p { font-size: 1em; }
    .imgHistoria { width: 95%; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 2.25em; }
    .tcomentarios h4 { font-size: 1.25em; }
    label { font-size: 0.75em !important; }
    .comentarios .btn { font-size: 0.85em; }
    .imgPersona { width: 15% !important; }
    
    /* Pie de página */
    footer h5 { font-size: 1em !important; }
    footer a, footer ul li, .copyright { font-size: 0.75em !important; }
    footer .p-4 { padding: 1em !important; }
    footer .py-3 { padding-top: 0.75em !important; padding-bottom: 0.75em !important; }    
}

@media screen and (min-width: 992px) and (max-width: 1199.98px) {

    /* Encabezado */
    header .col-lg-4 { padding-left: 0; padding-right: 0; max-width: 20%; }
    header .p-4 { padding: 1em!important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: none; }
    .menu ul { display: flex; flex-direction: row; }
    .menu ul li { font-size: 0.9em !important; margin: 0 0.9em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 0 !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 2.25em !important; }
    .jumbotron .lead { font-size: 1em !important; }
    .inicio .p-3 { padding: 0.5em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 2.15em; }
    .card { width: 31% !important; }
    .card-title { font-size: 1em !important; }
    .card-text { font-size: 0.75em !important; }
    .card-footer .btn { font-size: 0.8em; }
    
    /* Historia */
    .historia h1 { font-size: 2em; }
    .historia h2 { font-size: 1.5em; }
    .historia p { font-size: 1em; }
    .imgHistoria { width: 90%; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 2.25em; }
    .tcomentarios h4 { font-size: 1.25em; }
    label { font-size: 0.7em !important; }
    .comentarios .btn { font-size: 0.8em; }
    .imgPersona { width: 15% !important; }
    
    /* Pie de página */
    footer h5 { font-size: 1em !important; }
    footer a, footer ul li, .copyright { font-size: 0.75em !important; }
    footer .p-4 { padding: 1em !important; }
    footer .py-3 { padding-top: 0.65em !important; padding-bottom: 0.65em !important; }         
}
 
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    header .col-md-4 { padding-left: 0; padding-right: 0; max-width: 25%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.75em; }
    .btnMenu.mr-5 { margin-right: 1.5em !important; }
    
    /* Menú */
    .menu { display: flex; justify-content: center; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: row; padding-top: 0.5em; }
    .menu ul li { font-size: 0.8em !important; margin: 0 1em; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 0 !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 2em !important; }
    .jumbotron .lead { font-size: 1em !important; }
    .inicio .p-3 { padding: 0.25em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 1.90em; }
    .card { width: 47% !important; }
    .card-title { font-size: 1em !important; }
    .card-text { font-size: 0.75em !important; }
    .card-footer .btn { font-size: 0.8em; }
    
    /* Historia */
    .historia h1 { font-size: 1.90em; }
    .historia h2 { font-size: 1.25em; }
    .historia p { font-size: 0.75em; }
    .imgHistoria { width: 90%; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 1.75em; }
    .tcomentarios h4 { font-size: 1em; }
    label { font-size: 0.7em !important; }
    .comentarios .btn { font-size: 0.8em; }
    .imgPersona { width: 15% !important; }
    
    /* Pie de página */
    footer h5 { font-size: 1em !important; }
    footer a, footer ul li, .copyright { font-size: 0.65em !important; }
    footer .p-4 { padding: 1em !important; }
    footer .py-3 { padding-top: 0.6em !important; padding-bottom: 0.6em !important; }    
}

@media screen and (min-width: 576px) and (max-width: 767.98px) {
    
    /* Encabezado */
    header .col-sm-6 { padding-left: 0; padding-right: 0; max-width: 30%; }
    header .p-4 { padding: 0.75em !important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.75em; }
    .btnMenu.mr-5 { margin-right: 1.5em !important; }
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column; padding-top: 0.5em; }
    .menu ul li { font-size: 0.7em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 0 !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 1.75em !important; }
    .jumbotron .lead { font-size: 0.75em !important; }
    .inicio .p-3 { padding: 0.25em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 1.75em; }
    .card { width: 47% !important; }
    .card-title { font-size: 1em !important; }
    .card-text { font-size: 0.75em !important; }
    .card-footer .btn { font-size: 0.75em; }
    
    /* Historia */
    .historia h1 { font-size: 1.75em; }
    .historia h2 { font-size: 1.25em; }
    .historia p { font-size: 0.75em; }
    .imgHistoria { width: 90%; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 1.75em; }
    .tcomentarios h4 { font-size: 1em; }
    label { font-size: 0.7em !important; }
    .comentarios .btn { font-size: 0.75em; }
    
    /* Pie de página */
    footer h5 { font-size: 0.75em !important; }
    footer a, footer ul li, .copyright { font-size: 0.5em !important; }
    footer .p-4 { padding: 0.75em !important; }
    footer .py-3 { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }
}

/* Estilo para dispositivos con tamaño de pantalla menor que 576px */
@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    header .col-6 { padding-left: 0; padding-right: 0; max-width: 35%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.5em; }
/*    .btnMenu.mr-5 { margin-right: 1.5em !important; }*/
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column;  padding-top: 0.5em; }
    .menu ul li { font-size: 0.65em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 0 !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 1.75em !important; }
    .jumbotron .lead { font-size: 0.75em !important; }
    .inicio .p-3 { padding: 0.25em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 1.75em; }
    .card { width: 90% !important; }
    .card-title { font-size: 1em !important; }
    .card-text { font-size: 0.75em !important; }
    .card-footer { font-size: 0.85em; }
    
    /* Historia */
    .historia h1 { font-size: 1.75em; }
    .historia h2 { font-size: 1.25em; }
    .historia p { font-size: 0.75em; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 1.75em; }
    .tcomentarios h4 { font-size: 1em; }        
    label { font-size: 0.7em !important; }
    .comentarios .btn { font-size: 0.75em; }
    
    /* Pie de página */
    footer h5 { font-size: 0.75em !important; }
    footer a, footer ul li, .copyright { font-size: 0.5em !important; }
    footer .p-4 { padding: 0.75em !important; }
    footer .py-3 { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }    
}

/* Estilo para dispositivos con tamaño de pantalla menor que 480px */
@media screen and (max-width: 480px) {
    
    /* Encabezado */
    header .col-6 { padding-left: 0; padding-right: 0; max-width: 40%; }
    header .p-4 { padding: 0.75em!important; }
    
    /* Botón del menú */
    .btnMenu i { font-size: 1.5em; }
/*    .btnMenu.mr-5 { margin-right: 1.5em !important; }*/
    
    /* Menú */
    .menu { display: flex; justify-content: flex-start; border-top: 1px solid #000; }
    .menu ul { display: flex; flex-direction: column; padding-top: 0.5em; }
    .menu ul li { font-size: 0.6em !important; margin: 0; }
    .menu ul li a { padding-left: 1.25em; padding-right: 1.25em; }
    .menu .text-white { color: #000 !important; }
    .menu .nav .nav-item .nav-link:hover { color: white !important; }
    
    /* Inicio */        
    .jumbotron { padding: 1em !important; margin-bottom: 0 !important; margin-left: 0.75em !important; margin-right: 0.75em !important; }
    .jumbotron .display-4 { font-size: 1.5em !important; }
    .jumbotron .lead { font-size: 0.75em !important; }
    .inicio .p-3 { padding: 0.25em !important; }
    
    /* Especialidades */
    .especialidades h1 { font-size: 1.5em; }
    .card { width: 90% !important; }
    .card-title { font-size: 1em !important; }
    .card-text { font-size: 0.75em !important; }
    .card-footer { font-size: 0.85em; }
    
    /* Historia */
    .historia h1 { font-size: 1.5em; }
    .historia h2 { font-size: 1em; }
    .historia p { font-size: 0.75em; }
    
    /* Comentarios */
    .tcomentarios h1 { font-size: 1.5em; }
    .tcomentarios h4 { font-size: 1em; }        
    label { font-size: 0.7em !important; }
    .comentarios .btn { font-size: 0.75em; }
    
    /* Pie de página */
    footer h5 { font-size: 0.75em !important; }
    footer a, footer ul li, .copyright { font-size: 0.5em !important; }
    footer .p-4 { padding: 0.5em !important; }
    footer .py-3 { padding-top: 0.5em !important; padding-bottom: 0.5em !important; }
}