/*
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 : 28/03/2023, 06:08:42 PM
    Author     : pcgc7
*/

:root {
    --colorAzul: #003958;
    --colorDorado: #b59a47;
    --colorBlanco: #fff;
    --colorWhitesmoke: #f5f5f5;
    --colorAlabaster: #f2f0e6;
    --colorSilver: #ccc;
    --colorRojo: #cc0000;
}

/* Encabezado */
.encabezado { background: linear-gradient(to right, var(--colorWhitesmoke) 0%, var(--colorDorado) 100%); }
.encabezado .img-fluid { max-width: 85%; }
.encabezado .p-4 { padding: 1.5em !important; }

/* Imagen de fondo */
.fondo { background-image: url('../imagenes/imgFondo.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; }
.colorFondo { background: rgba(0,0,0,0.4); }

/* Sección principal */
main .vh-100 { height: 100vh !important; } 
main .display-3 { font-family: 'Bree Serif', serif; font-size: 4.5em !important; } 
main .mx-4 { margin-left: 1.25em !important; }
main .my-4 { margin-top: 1.25em !important; margin-bottom: 1.25em !important; }
main .mb-5 { margin-bottom: 2.25em !important; }
.txtVision p, .txtVersiculo p { font-family: 'Noto Serif', serif; font-size: 2.5em; line-height: 1.75em; }
.bordes { border-top: 0.5em double var(--colorAzul); border-bottom: 0.5em double var(--colorAzul); }

/* Menú de opciones */
.row.mt-5 { margin-top: 3em !important; }
.card { width: 18% !important; }
.card-header { font-size: 3em !important; }
.card-title { font-size: 1.5em !important; }
.card-text { font-size: 1em !important; }
.btn-lg { font-size: 1.25em !important; }

/* Imagenes movibles */
.parallax-seccion-1 { background-image: url('../imagenes/fondoParallax_1.jpg'); background-attachment: fixed; }
.parallax-seccion-2 { background-image: url('../imagenes/fondoParallax_2.jpg'); background-attachment: fixed; }
.fondo, .parallax-seccion-1, .parallax-seccion-2 { background-size: cover; background-position: center; background-repeat: no-repeat; }

/* Carrusel de imágenes */
.carousel-control-next, .carousel-control-prev { top: -7em !important; }
.flechaPrev, .flechaSig { font-size: 4em; }

/* Efecto de onda */
.wave { max-width: 100%; position: relative; top: -8.5em; }

/* Pie de página */
.col-sm-4 h4 { font-size: 1em !important; }
.col-sm-4 .txtInfo, .barraInfo { font-size: 0.75em; }
.list-group-item { padding: 0.5em !important; }

/* Preloader */
.contenedorLoader { background: var(--colorAlabaster); position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 100; transition: all 1.5s; }

/********************* Media queries *********************/

/* Estilo para dispositivos con tamaño de pantalla mayor a 1424px y menor que 1648px */
@media screen and (min-width: 1424px) and (max-width: 1647.98px) {
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 80%; }
    .encabezado .p-4 { padding: 1.5em!important; }
    
    /* Sección principal */
    main .vh-100 { height: 100vh !important; }
    main .display-3 { font-size: 3.5em !important; }
    main .mx-4 { margin-left: 1.25em !important; }
    main .my-4 { margin-top: 1.25em !important; margin-bottom: 1.25em !important; }
    main .mb-5 { margin-bottom: 2em !important; }
    .txtVision p, .txtVersiculo p { font-size: 2.5em; }    
    
    /* Menú de opciones */
    .row.mt-5 { margin-top: 2.5em !important; }
    .card { width: 18% !important; }
    .card-header { font-size: 3em !important; }
    .card-title { font-size: 1.5em !important; }
    .card-text { font-size: 1em !important; }
    .btn-lg { font-size: 1.25em !important; }
    
    /* Efecto de onda */
    .wave { top: -8em; }   
    
    /* Pie de página */    
    footer .w-50 { width: 60% !important; }
    .list-group-item { padding: 0.5em !important; }
    
    /* Preloader */
    .contenedorLoader img { width: 20%; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 1200px y menor que 1424px */
@media screen and (min-width: 1200px) and (max-width: 1423.98px) {
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 80%; }
    .encabezado .p-4 { padding: 1.25em!important; }
    
    /* Sección principal */
    main .vh-100 { height: 100vh !important; }
    main .display-3 { font-size: 3.5em!important; }
    main .mx-4 { margin-left: 1em !important; }
    main .my-4 { margin-top: 1em !important; margin-bottom: 1em !important; }
    main .mb-5 { margin-bottom: 1.75em !important; }
    .txtVision p, .txtVersiculo p { font-size: 2.25em; }    
    
    /* Menú de opciones */
    .row.mt-5 { margin-top: 2.25em !important; }
    .card { width: 30% !important; }
    .card-header { font-size: 3em !important; }
    .card-title { font-size: 1.5em !important; }
    .card-text { font-size: 1em !important; }
    .btn-lg { font-size: 1.25em !important; }
    
    /* Efecto de onda */
    .wave { top: -7.5em; }   
    
    /* Pie de página */    
    footer .w-50 { width: 70% !important; }
    .list-group-item { padding: 0.5em !important; }
    
    /* Preloader */
    .contenedorLoader img { width: 20%; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 992px y menor que 1200px */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    
    /* Encabezado */    
    .encabezado .img-fluid { max-width: 75%; }
    .encabezado .p-4 { padding: 1.25em!important; }
    
    /* Sección principal */      
    main .vh-100 { height: 80vh !important; }
    main .display-3 { font-size: 3em !important; }
    main .mx-4 { margin-left: 1em !important; }
    main .my-4 { margin-top: 1em !important; margin-bottom: 1em !important; }
    main .mb-5 { margin-bottom: 1.5em !important; }
    .txtVision p, .txtVersiculo p { font-size: 2em; }    
    
    /* Menú de opciones */
    .row.mt-5 { margin-top: 2em !important; }
    .card { width: 45% !important; }
    .card-header { font-size: 3em !important; }
    .card-title { font-size: 1.5em !important; }
    .card-text { font-size: 0.85em !important; }
    .btn-lg { font-size: 1.25em !important; }
    
    /* Carrusel de imágenes */
    .carousel-control-next, .carousel-control-prev { top: -3em !important; }
    .flechaPrev, .flechaSig { font-size: 3em; }  
    
    /* Efecto de onda */
    .wave { top: -6.75em; }   
    
    /* Pie de página */
    footer .w-50 { width: 75% !important; }
    .list-group-item { padding: 0.5em !important; }
    
    /* Preloader */
    .contenedorLoader img { width: 25%; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 768px y menor que 992px */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 70%; }
    .encabezado .p-4 { padding: 1.25em!important; }
    
    /* Sección principal */    
    main .vh-100 { height: 70vh !important; }
    main .display-3 { font-size: 2.75em !important; }
    main .mx-4 { margin-left: 0.75em !important; }
    main .my-4 { margin-top: 0.75em !important; margin-bottom: 0.75em !important; }
    main .mb-5 { margin-bottom: 1.25em !important; }
    .txtVision p, .txtVersiculo p { font-size: 1.75em; }    
    
    /* Menú de opciones */
    .row.mt-5 { margin-top: 1.75em !important; }
    .card { width: 45% !important; }
    .card-header { font-size: 2.5em !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.75em !important; }
    .btn-lg { font-size: 1em !important; }
    
    /* Carrusel de imágenes */
    .carousel-control-next, .carousel-control-prev { top: -3em !important; }
    .carousel-item .w-50 { width: 65% !important; }
    .flechaPrev, .flechaSig { font-size: 3em; }
    
    /* Efecto de onda */
    .wave { top: -6em; }
    
    /* Pie de página */
    .col-sm-4 .txtInfo, .barraInfo { font-size: 0.65em !important; }
    .list-group-item { padding: 0.5em !important; }
    
    /* Preloader */
    .contenedorLoader img { width: 30%; }
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 576px y menor que 768px */
@media screen and (min-width: 576px) and (max-width: 767.98px) {  
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 65%; }
    .encabezado .p-4 { padding: 1em!important; }
    
    /* Sección principal */
    main .vh-100 { height: 60vh !important; }
    main .display-3 { font-size: 2.5em !important; }
    main .mx-4 { margin-left: 0.75em !important; }
    main .my-4 { margin-top: 0.75em !important; margin-bottom: 0.75em !important; }
    main .mb-5 { margin-bottom: 1em !important; }
    .txtVision p, .txtVersiculo p { font-size: 1.25em; }    
    
    /* Menú de opciones */
    .card { width: 45% !important; }
    .row.mt-5 { margin-top: 1.5em !important; }
    .card-header { font-size: 2.5em !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.75em !important; }
    .btn-lg { font-size: 1em !important; }
    
    /* Carrusel de imágenes */
    .carousel-control-next, .carousel-control-prev { top: -3em !important; }
    .carousel-item .w-50 { width: 65% !important; }
    .flechaPrev, .flechaSig { font-size: 2em; }
    
    /* Efecto de onda */
    .wave { top: -5.5em; }
    
    /* Pie de página */
    .col-sm-4 { padding-right: 0!important; }
    .col-sm-4 h4 { font-size: 0.75em !important; }
    .col-sm-4 .txtInfo, .barraInfo { font-size: 0.55em !important; }
    .list-group-item { padding: 0.5em !important }        
}

/* Estilo para dispositivos con tamaño de pantalla mayor a 481px y menor que 575.98px */
@media screen and (min-width: 481px) and (max-width: 575.98px) {
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 55%; }
    .encabezado .p-4 { padding: 0.75em!important; }

    /* Sección principal */
    main .vh-100 { height: 50vh !important; }
    main .display-3 { font-size: 2em !important; }
    main .mx-4 { margin-left: 0.5em !important; }
    main .my-4 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
    main .mb-5 { margin-bottom: 0.75em !important; }
    .txtVision p, .txtVersiculo p { font-size: 1.25em; }   
    
    /* Menú de opciones */
    .row.mt-5 { margin-top: 1.25em !important; }
    .card { width: 80% !important; }
    .card-header { font-size: 2.5em !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.75em !important; }
    .btn-lg { font-size: 1em !important; }
    
    /* Carrusel de imágenes */
    .carousel-item .w-50 { width: 60% !important; }
    .carousel-control-next, .carousel-control-prev { top: -2em !important; }    
    .flechaPrev, .flechaSig { font-size: 2em; }
    
    /* Efecto de onda */
    .wave { display: none; }
    
    /* Pie de página */
    .col-4 { padding-right: 0 !important; }
    .col-4 h4 { font-size: 0.75em !important; }    
    .col-4 .txtInfo, .barraInfo { font-size: 0.5em !important; }
    .list-group-item { padding: 0.5em !important }        
}

/* Estilo para dispositivos con tamaño de pantalla menor que 480px */
@media screen and (max-width: 480px) {
    
    /* Encabezado */
    .encabezado .img-fluid { max-width: 45%; }
    .encabezado .p-4 { padding: 0.75em !important; }
    
    /* Sección principal */
    main .vh-100 { height: 45vh !important; }
    main .display-3 { font-size: 1.75em !important; }
    main .mx-4 { margin-left: 0.5em !important; }
    main .my-4 { margin-top: 0.5em !important; margin-bottom: 0.5em !important; }
    main .mb-5 { margin-bottom: 0.5em !important; }
    .txtVision p, .txtVersiculo p { font-size: 1em; }    
    
    /* Menú de opciones */
    .row.my-5 { margin-top: 1em !important; margin-bottom: 1em !important; }
    .card { width: 90% !important; }
    .card-header { font-size: 2.5em !important; }
    .card-title { font-size: 1.25em !important; }
    .card-text { font-size: 0.75em !important; }
    .btn-lg { font-size: 1em !important; }
    
    /* Carrusel de imágenes */    
    .carousel-item .w-50 { width: 60% !important; }
    .carousel-control-next, .carousel-control-prev { top: -2em !important; }
    .flechaPrev, .flechaSig { font-size: 1.5em; }    
        
    /* Efecto de onda */
    .wave { display: none; }
        
    /* Pie de página */
    .col-4 { padding-right: 0 !important; }
    .col-4 h4 { font-size: 0.6em !important; }    
    .col-4 .txtInfo, .barraInfo { font-size: 0.35em !important; }
    .list-group-item { padding: 0.5em !important; }
}