/* --------------------------------- HEADER DEL INDEX (FRONT END) ------------------------------------
    Está compuesto de: 
    - Logo justtraining azul.
    - Pequeño aviso sesión iniciada
    - Nav menu. 
    
    TODO ESTÁ DENTRO DE LA FOTO PRINCIPAL DE INDEX (LA QUE SALGO CORRIENDO-- */

    #div_foto_header_index{
        height: 550px;
        width: 1250px;
    
        background-image: linear-gradient(#a8f2ff 0%, #22419b 50%,#a8f2ff 100%), url("../img/fotos/runbn1300.jpg") ;
        background-blend-mode:soft-light;
        /* background: linear-gradient(#22419b 0%,#a8f2ff 100%); */
        background-size: 115%;
        background-position: -130px -50px;
    
    }
    
    
    /* ------------------- La fila 1 contiene el logo-letras just training y el aviso hola, logueado --------*/
    #f1_header{
        display:grid;
    
        grid-template-areas: "logo p";
    }
    
    #f1_header p{
        text-align: right;
        margin-right: 10px;
    }
    
    #f1_header .dropdown_content{
        text-align: right;
        margin-right: 10px;
    }
    
    #div_foto_header_index header{
        height: 100px;
        background-color: black;
    
        /* shape-outside: circle(50%); */
        mask-image: radial-gradient(circle 2000px at 50% 90%, black, transparent 76%);
    }
    
    #div_foto_header_index header:last-child{
        text-align: center;
    }
    
    #div_foto_header_index nav{
        text-align: center;
        justify-items: center;
    }
    
    #div_foto_header_index nav ul{
        text-align: center;
    }
    
    #div_foto_header_index nav ul li{
        text-align: center;
    }


    


/* ------------------------------- Estilo del Navigation Menu ---------------------- */

nav ul{
    margin: 10px 10px 20px;
    padding: 0px;
    
    text-align: right;

    display: flex;
    justify-content: end;

    list-style-type: none;
    
}

nav ul li{
    width: 160px;
    height:50px;


    /* border: 1px solid grey; */

    text-align: center;
}

nav ul li a{
    font-size: 140%;

    text-align:center;
    color: grey;

    text-decoration: none;
}

nav ul li a.active{
    font-size: 140%;

    /* background-color: #6f6f6f;
    border-radius: 5px; */

    text-align:center;
    color: blue;
    font-weight:600;

    text-decoration: underline;
}

nav ul li a:hover{
    font-size: 140%;
    transition-duration: 1s;

    text-decoration: underline;
}

/* ------------------------------ DROPDOWN MENÚ -------------------- */
.dropdown_menu{
    position: relative;
}

.dropdown_content{
    position: absolute;
    right: 0px;
    display: none;

    text-align: right;
    justify-content: end;
}

.dropdown_content a{
    text-align: right;

    color: white;
}

.dropdown_menu:hover .dropdown_content{
    display: inline-block;
}