.sidenav {
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: var(--red);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
z-index: 20;
}
      
.sidenav a {
text-decoration: none;
text-transform: uppercase;
font-size: 60px;
line-height: 90px;
color: white;
font-weight: 600;
display: block;
transition: 0.6s;
}
    
.sidenav a:hover {color: var(--darkgrey)}
    
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 40pxpx;
margin-left: 50px;
}

.button_menu {
position: fixed;
top: 25px;
right: 25px;
width: 64px;
height: 64px;
text-align: center;
cursor:pointer;
background-color: var(--red);
border-radius: 50%;
font-size:48px;
line-height: 54px;
color:white;
z-index: 10;
}
    
.button_menu:hover {color:var(--darkgrey)}

#nav-item {
font-size: 18px;
text-align: center;
}
#nav-item:hover {
color: white;
}

.flexbox-nav {
display: flex;
flex-wrap: wrap;
width: 100%;
height: 80vh;
align-items: center;
justify-content: center;
}
.flexbox-nav > div {
width: 250px;
height: 250px;
border: solid 1px white;
border-radius: 10px;
padding: 20px;
margin: 25px;
}
.flexbox-nav > div:hover {
border-color: var(--darkgrey);
background-color: var(--darkgrey);
}
.tel-button {
width: 64px;
height: 64px;
font-size: 38px;
line-height: 64px;
background-color: var(--blue);
border-radius: 50%;
text-align: center;
color: white;
position: fixed;
top: 105px;
right: 25px;
z-index: 10;
}
.tel-button:hover {
background-color: var(--darkgrey)
}