/*
paleta de colores:
dominantes: 49768f , d6dcde
complementarios: 009ef1 , ffd07d , 171612 , ffffff
*/

/*estos 2 codigos (html,body) para que la página se ajuste a todo tipo de pantallas*/
html{
    max-width: 100vw !important;
    overflow-x: hidden !important;
}
body{
    /*font-family: Helvetica, sans-serif;*/
    max-width: 100vw !important;
    overflow-x: hidden !important;
}


/*fondo base para todos los modulos*/
.fondo-base{
    /*filter: blur(5px);*/ /*difumina la imagen*/
    /*--webkit-filter: blur(5px);*/
    background-size: cover !important;
    background-position: center center !important;
    position: fixed;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 100%;
    opacity:0.5;
    /*background-image: url('../../assets/img/fondo_pantalla_natura.jpg');*/
    background-color: #d6dcde;
    }


/*Barra de navegación*/
.navbar{
    /*height: 60px !important;*/
    background-color:#49768f !important;
    margin-top: 10px;
    position: fixed !important; /*para fijar el menú de navegación*/
    width: 100vw;/*recuperamos la anchura maxima con "100vw" (vw=view width)*/
    /*opacity:0.8 !important;*/
    z-index:1; /*para que se sobreponga sobre cualquier elemento (que esté por encima del HERO SECTION)*/
    /*color:orange !important;*//*no se puede cambiar de color. La estrategia es usar <span>*/
    box-shadow: 0px 0px 20px gray;/*sombra*/
}
/*color y tamaño de los enlaces del menú del navbar*/
.nav-item a{
    color: white !important;
    font-size: 18px !important;
}
/*hover sobre los enlaces del navbar*/
.enlace:hover{
    color:#ffd07d;
    border-bottom: 4px solid #ffd07d;
}
/*borde icono hamburguesa del menú. El icono es una imagen SVG. Quizas lo mejor sería usar font awesome para modificar el icono*/
.navbar-toggler{
    /*border: none !important;*/
    border-color:white !important;
    /*background-color:#637373 !important;*/
}
/*se personaliza el nombre (la Marca) o el usuario*/
.navbar-brand{
    /*font-family: "oswald";*/ 
    font-size: 18px !important; 
    color:#ffd07d !important;
    /*font-weight: 700;*/ 
    width: 10%;
}

/*Manejo de submenus*/
.dropdown-menu{ 
    background-color: #d6dcde !important;
}
.dropdown-menu li a{/*color enlaces submenú*/
    color:#49768f !important;
    font-size: 18px !important;
}
.dropdown-menu li a:hover{
    background-color:inherit !important; /*se elimina el hover por defecto de bootstrap*/
}
.enlace-submenu:hover{/*color enlaces submenú*/
    color:#ffd07d !important;
    background-color: #49768f !important;
    /*border-bottom: 4px solid #ffd07d;*/
}


#area-de-trabajo{
    background-color: white;
    margin:3px auto;
    padding:70px 0px 20px 0px;
    /*opacity:0.9;*/
    filter: brightness(100%);/*para que se muestre colores originales a pesar del opacity de .general-background*/
    text-align:center;
    width:auto;
    /*display: flex;
    flex-wrap: wrap;*/
    color:black;
}