/* >>>>>>>>>>>>>>>>>>>> NAV MENU <<<<<<<<<<<<<<<<<<<< */

.menu {
    width:250px;
    height:100%;
    top: 5.1vh;
    padding: 20px;
    position:fixed;
    right:-250px;
    background-color: #000000;
    background-color:rgba(0,0,0,0.50);
    z-index: 99;
}
    
.menu ul{
        width:100%;
        float:right;
        list-style-type:none;
        margin:30px 0 0 0;
        padding:0;
        font-size: 18px;
}
    
.menu ul li{
    margin-top:20px;	
    border-left: 10px solid transparent;
    transition: all 0.3s;
}
    
.menu ul li:first-child{
     margin-top:30px;
}
    
.menu ul li:hover{
    border-bottom:1px solid #07b3fa;
}
    
.menu ul li a{
    text-align: center;
    color: #fff;
    text-decoration: none;
    padding: 5px 0;
    display: block;
    transition:all 0.2s ease-in-out;
}
    
.menu ul li:hover a{
    color:#24a8ff;
    font-size: 20px;
    font-weight: 500;
}

.menu {
    /* Stili iniziali, l'elemento è visibile */
    transition: top  0.5s ease-in; /* Effetto di transizione morbida */
}

.hide-nav {
    /* Nasconde l'elemento spostandolo sopra la viewport */
    top: 0px;
}

/* >>>>>>>>>>>>>>>>>>>> MENUBUTTON <<<<<<<<<<<<<<<<<<<<	*/

#menuButton{
    position:absolute;
    font-size: 3.8vh;
    color:#fff;
    top:50%;
    right: 2.5vh;
    transform: translate(0,-50%);
    line-height: 0;
    
}
    
#menuButton a{
    cursor:pointer;
    transition:all 0.2s;
}
    
#menuButton a:hover{
    color:#07b3fa;
}

.title_menu {
    color:#07b3fa;
    font-size: 2.2vh;
    position: absolute;
    right: 6vh;
    line-height: 1;
    top:50%;
    transform: translate(0,-50%);
    padding-right: 1.5%;
}

/*	>>>>>>>>>>>>>>>>>>>> CLOSEBUTTON <<<<<<<<<<<<<<<<<<<< */

.closeButton{
    font-size:0.8em;
    color:#fff;
    position:absolute;
    right:34px;
    top:30px;
}
    
.closeButton a:hover{
    color:#3498db;
    cursor:pointer;
}