#nav {
    /* container */
}
#nav>a {
    display: none;

}
    
#nav li {
    position: relative;
    line-height: 0.7rem;}
/* first level */
#nav>ul {
    display: flex;
    justify-content: center;

}
#nav>ul>li {
    width: 9%;
    float: left;
    margin-top: 1rem;
    justify-content: center;
    }

#nav ul li :hover{
    color: #c1bbbb !important;
}
/* second level */
#nav li ul {
    display: none;
    position: absolute;
    top: 100%;
}
#nav li:hover ul {
    display: block;
    color:#DC143C; 
}

#nav li>ul li{
width: 250px;
background: #c1bbbb /*#cafc94*/;
}

a {
    font: 13px arial, helveltica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: #000;
}
#nav li>ul :hover {
    width:250px;
    background: #DC143C /*#EE1D2D*/;
    
}



.containerad {
    background-color:#000;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
    height: 13rem; !important;
}


@media only screen and (max-width: 40em)

/* 640 */
    {
    #nav {
        position: relative;
        font-size: 30;
    }
    #nav>a {
        line-height: 0.3em;
        
    }
    #nav:not( :target)>a:first-of-type,
    #nav:target>a:last-of-type {
        display: block;
    }
    /* first level */
    #nav>ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
    #nav:target>ul {
        display: block;
        background:#73C6B6;
        width: 15rem;
    }
    #nav>ul>li {
        width: 100%;
        float: none;
    }
    /* second level */

    #nav li ul {
        position: static;
    }
  
}