nav 
{
    width: 100%;
    height: 90px;
    background: #222222;
}
 
nav .main_pages 
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
 
nav .main_pages a 
{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    color: white;
}
 
nav a:hover 
{
    background: #eeeeee;
	color:#222222;
}
label
{
    display: none;
}

@media all and (max-width: 991px)
{
	nav
    {
        height: 50px;
    }
 
    nav .main_pages 
    {
        display: none;
        flex-direction: column;
        background: #222222;
        height: 150px;
    }
 
    nav .main_pages a {
        width: 80%;
    }
 
    label 
    {
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }
 
    #toggle:checked + .main_pages {
        display: flex;
    }
}