/* Estilos para el pie de página: ============================================================================================ */
    .mi-pie-de-pagina{
        position: fixed !important;
        bottom: 0px; 
        width: 100%;
        left: 0px;
        display: flex;
        align-items: center;
        box-shadow: 0 0 30px rgb(0 0 0 / 50%); /*antes: 0 0 30px rgb(0 0 0 / 20%); */
    }
    @media (min-width: 992px) {
		.mi-pie-de-pagina{
		    height: 46px !important; /* Poner un padding bottom de esta misma altura al body para compenzar */
		}                
    }
    @media (max-width: 991px) {
		.mi-pie-de-pagina{
		    height: auto !important; /* Poner un padding bottom de esta misma altura al body para compenzar */
		}            
    }    		
    @media (max-width: 330px) {
        .footer-largo{
            display: none;
        }                
    } 
    html .bg-color-light-scale-1 {
        background-color: black !important; /* rgba(33, 37, 41, 0.9) #212529*/
        color: #d1d1d1 !important;
    }
    .footer-top-border {
        border-top: 1px solid rgba(33, 37, 41, 0.9) !important;
    }
    @media (min-width: 992px) {
        #footer{
            display: none !important;
        }
        .body{
            padding-bottom: 15px !important; /*solo para dejar un poquito de espacio*/
        }        
    }
    @media (max-width: 991px) {
        .body{
            padding-bottom: 55px !important; /* Éste padding-bottom de 50px es para compenzar la misma altura de 70px del footer que esta como 'fixed' */
        }
    }
    #footer{
        text-align: center;
    }
    /*=============================================================================================================================*/
    
    
    .body{
        background-color: transparent;
    }
    
    .body-galerias{
        background-color: #0000001a;
    }
    
    .body-login{
        background-color: #323232 !important;
    }
    
    @media (min-width: 992px) {
    	.mi-pie-de-pagina{
    		padding-left:254px !important; /* 254px exactamente el ancho del menú, cuando se posiciona del lado izquierdo verticalmente. */
    	}
    	.redes-sociales-1{
    	    display: block !important; /* Mostramos los botones de redes sociales de la seccion izquierda debajo de los menus de navegacion */
    	}
    	.redes-sociales-2{
    	    display: none !important; /* Ocultamos los botones de redes sociales del centro de la barra superior del menu */
    	}
        #div-grid-titulo{
            border: 0px solid red;
            width: 100%;
            height: 1px;
        }  
        #grid-titulo{
            margin-top: 4.3rem !important;
        }  
        #grid-titulo-portafolio{
            margin-top: 1.5rem !important;
        }         
    }
    
    #div_archivos_seleccionados, #div_archivos_por_editar, #div_costos_totales, #div_paquetes, #div_otro_texto{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    #div_archivos_seleccionados{
        color: black; /*antes: #e54e53 */
        font-size: 1.3em !important;
    }
    
    #div_archivos_por_editar{
        color: black; /*antes: #e54e53 */
        font-size: 1.4em !important;
    }  
    
    #div_costos_totales{
        color: black; /*antes: #e54e53 */
        font-size: 1.4em !important;
    }     
    
    #div_paquetes{
        color: black; /*antes: #e54e53 */
        font-size: 1.5em !important;
    }
    
    #div_otro_texto{
        color: #777;
        font-size: 1.2em !important;
    }
    
    @media (max-width: 991px) {
        html.side-header #header.side-header {
            position: fixed !important;
            top: 0px;
            width: 100%;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
        }
        .body{
            padding-top: 83px; /* Este valor representa la altura del menu superior, que con max-width: 991px, esta como fixed */
        }
    	.redes-sociales-1{
    	    display: none !important; /* Ocultamos los botones de redes sociales de la seccion izquierda debajo de los menus de navegacion */
    	}
    	.redes-sociales-2{
    	    display: block !important; /* Mostramos los botones de redes sociales del centro de la barra superior del menu */
    	} 
        #div-grid-titulo{
            border: 0px solid red;
            width: 100%;
            height: 83px; /*Alto correspondiente al mismo alto de la barra de menu superior*/
        }  
        #grid-titulo{
            margin-top: 0.5rem !important;
            margin-bottom: 0.5rem !important;
        }  
        #grid-titulo-portafolio{
            margin-top: 1.5rem !important;
            margin-bottom: 0rem !important;
        } 
        #header .header-nav-main nav > ul li a {
            line-height: 45px !important; /* Alto del renglon del menu, que aparece en tamaños de pantalla pequeños como de celulares*/
        } 
    }
    @media (max-width: 330px) {
        #header .header-nav-main nav > ul li a {
            line-height: 40px !important; /* Alto del renglon del menu, que aparece en tamaños de pantalla pequeños como de celulares*/
        }
    } 
    
    
    .social-icons li a {
        height: 32px;
        line-height: 32px;
        width:  32px;
        padding-top: 3px;
    }
    
    .redes-sociales-2{
        z-index: 1 !important;
        margin-left: 0px !important;
    }
    
    .social-icons li a.facebook {
        color: #3929aa !important; /*antes #3b5a9a */
    }
    
    .social-icons li a.instagram {
        color: #7c4a3a !important;
    } 
    
    .social-icons li a.whatsapp {
        color: #25d366 !important;
    }            
    #header .redes-sociales-1 {
    	margin-left: 0px;
    }    
    
    
    
    /* Estilos para cuando pasamos el mouse encima de los iconos de las redes sociales */
    .social-icons li:hover a.facebook {
        color: #3b5a9a !important;
    } 
    .social-icons li:hover a.instagram {
        color: #7c4a3a !important;
    }
    .social-icons li:hover a.whatsapp {
        color: #25d366 !important;
    }
    .social-icons li:hover.social-icons-whatsapp a, .social-icons li:hover.social-icons-instagram a, .social-icons li:hover.social-icons-facebook a{
        background: transparent !important;
    }    
    
    

    
    
    html {
      scroll-behavior: smooth !important; /* Necesario para que el scroll sea muy suave cuando hacemos click en 'Ver galeria' y se desplace hacia abajo!!! */
    }    
    
    #btn-ver-galeria:hover, #btn-ver-galeria.hover {
    	background-color: #3929A8 !important;
    }
    
    #btn-ver-galeria:hover, #btn-ver-galeria.hover, #btn_acceder:hover, #btn_acceder.hover {
    	background-color: #3929A8 !important;
    	opacity: 0.9;
    }    
    
    #btn-ver-galeria, #btn_acceder {
    	background-color: #281D79 !important;
    } 
    
    
    /* seccion para la pagina de portafolio */
    .thumb-info.thumb-info-hide-info-hover .thumb-info-wrapper:after {
        opacity: 0 !important;   /*Original 0.65*/ 
    }
    
    
    @media (max-width: 330px) {
        #header .header-nav-main nav {
            max-height: 75vh; /* original 50vh - Alto del contenedor del menu de opciones para pantallas pequenas como de celular*/
        }                
    }    
    @media (max-width: 991px){

        #header .header-nav-main nav {
            max-height: 80vh; /* original 50vh - Alto del contenedor del menu de opciones para pantallas pequenas como de celular*/
        }
        #header .header-nav-main nav > ul{
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            background: #eceeff;
            border: 1px solid #d9d9d9;
        }
    }
    
    
    @media (max-width: 767px) {
        #breadcrumb_contacto, #breadcrumb_acerca_de_mi{
            display: none !important;
        }        
    }