#menu {
    width: 90%;
    height: 2em;
	margin-left:2.0em;
    font-size: 85%;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    box-shadow: 0.3em 0.3em 0.3em 0.3em black;
 /*   text-shadow: 3px 2px 3px #333333;*/
    background-color: #8B8878;
        border-radius: 0.5em;
}
#quadrado {
    width: 33%;
    height: 5em;
    font-size: 1em;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
	color: white;
   text-shadow: 0.2em 0.2em 0.2em #333333;
    box-shadow: 0.7em 0.7em 0.7em 0.4em black;
    background-color: #8B8878;
        border-radius: 0.5em;
}
#quadrado1{
    width: 45%;
    height: 2em;
    font-size: 1em;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
	color: white;
   text-shadow: 0.2em 0.2em 0.2em #333333;
    background-color: #8B8878;
    border-radius: 0.5em;
}

#menu ul {
    height: auto;
    padding: 0.5em 0em;
    margin: 0px;
width:100%;
max-width:100%;
}

#menu li { 
display: inline;
position: relative; 
padding: 2em; 
width:25%;
}

#menu a {
    text-decoration: none;
    color: white;
    padding: 0.5em;
}
#menu a:hover {
    color: #8B8878;;
    background-color: #FFF;
}

@media screen and (min-width:10px) and (max-width:680px){
    #menu ul {
		height: auto;
		padding: 0.5em 0em;
		margin: 0;
		width:100%;
		max-width:100%;
	}
	#menu ul li { 
		display: inline; 
		padding: 0.5em; 
		width:22%;
		max-width:25%;
	}
	#menu {
		width: 94%;
		height: 2em;
		margin-left:0.1em;
		font-size: 50%;
		font-family: Tahoma, Geneva, sans-serif;
		font-weight: bold;
		text-align: center;
		box-shadow: 0.3em 0.3em 0.3em 0.3em black;
	 /*   text-shadow: 3px 2px 3px #333333; */
		background-color: #8B8878;
			border-radius: 0.5em;
	}
}