*{ margin:0; padding:0;}
@font-face{ font-family:"verdana"; src:url(../fonts/verdana.ttf);}

.menu{ width:100%; height:37px;  font-family:"verdana"; }
.menu ul{ list-style:none; position:relative; }
.menu ul li{ width:138px; float:left;}
.menu a{ padding:10px; display:block; text-decoration:none; color:#535151; text-align:center; background-color:#fff; margin-top:0; font-size:0.9em; font-weight:bold; text-transform:uppercase; font-family:"verdana"; }
.menu ul ul{ position:absolute; visibility:hidden;  }
.menu ul li:hover ul{ visibility: visible; }
.menu a:hover{ background:#fff; color:#000000; font-weight:100;}
.menu ul ul li{ float:none; border-bottom:#FFFFFF solid 1px; width:135px; }
.menu ul ul a{ background:#0061A5; color:#FFFFFF; }
.menu ul ul a:hover{ background:#000000; color:#FFFFFF; }
.menu ul ul li a{ background:#3A3A3A;}
label[for="btn_menu"]{ padding:2px; background:#595A5A; collor:#EB4144; font-family:"verdana"; text-align:center; font-size:0.9em; cursor:pointer; width:40px; height:40px; color:#FFFFFF;}
label[for="btn_menu"]:hover{color:#72B069;}
#btn_menu{ display:none;}
label[for="btn_menu"]{ display:none;}

@media(max-width: 800px){
	#btn_menu:checked ~ .menu{ margin-left:0;}
	.menu{ margin-top:5px; margin-left:-100%; transition: all 0.8s; height:0px;}
	.menu a{ background:#000000; border-bottom:1px #fff solid; color:#fff;}
	label[for="btn_menu"]{ display:block;}
	.menu ul li{ width:100%; float:none;}
	.menu a:hover{ background:#fff; color:#4B4B4B; font-weight:bold;}
	.menu ul ul li{width:100%;}
	.menu ul ul{ position:static; overflow:hidden; max-height:0; transition: all 0.8s;}
	.menu ul li:hover ul{ height:auto; max-height:200px; background:#7A7A7A;}
	.menu a:hover{ background:#7F7F7F; color:#FFFFFF; font-weight:bold;}
	}