/*------------------------------------------------------------*/
/* classi per la gestione del menù principale */
/*------------------------------------------------------------*/

/* stile generale navbar */
.mainNavBar {
    position: fixed;
    height: 40px;
    width: 100vw;
    top: 10px;
    margin-left: 0 !important;
    line-height: 40px;
    text-align: center;
    z-index: 1;
    margin-bottom: 10px;
}

.mainNavOver:hover {
    cursor: pointer;
    background-color: var(--navSelect);
    color: var(--colorNavSelect);
}

/* colore per schermi  */
.navA {
    background-color: var(--navBarA);
    color: var(--navBarColor);
}

.navB {
    background-color: var(--navBarB);
    color: var(--navBarColor);
}

.navC {
    background-color: var(--navBarC);
    color: var(--navBarColor);
}

/* per schermi sotto i 768px le voci del menù verranno sostituite da icone*/
@media (max-width: 768px) {

    #mainMenuA:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        content: '\e494';
        font-size: calc(16px + 1.5vw);  
    }

    #mainMenuB:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        content: '\f07c';
        font-size: calc(16px + 1.5vw);     
    }

    #mainMenuC:before {
        font-family: 'Font Awesome 6 Free';
        font-weight: 900;
        -webkit-font-smoothing: antialiased;
        content: '\f0c7';
        font-size: calc(16px + 1.5vw);
    }
}