#nav{
max-width:280px;
margin:0px;
float:left;
margin-left:0px;
}

#nav2{
float:right;
max-width:262px;
margin:0px;
}

#nav ul {
background-color:#fff;
max-width: 280px;
margin: 0 auto;
text-align:left;
padding:0px;
font-size:0;
z-index:1000;
position:absolute;
}

ul iframe{
height:100%;
z-index:1000;
}

#nav2 ul {
background-color:#fff;
max-width: 280px;
margin: 0 auto;
text-align:left;
padding:0px;
font-size:0;
z-index:1000;
position:absolute;
}


/*altura da categoria*/
li.cat, li.cat2, li.cat3, span.cat4, li.sub{
height:23px; 
line-height: 23px;
}

li {
width:280px;
background-color:#fff;
font: normal 16px arial;
display:block;
font-size:14px;
align-items: center;
}

li a{
display:block;	
color:#fff;
user-select: none;

/*altura dos links*/
height:23px;
line-height: 23px;
}


li a:link, a:visited{
display:block;	
padding:5px 3px;
text-decoration:none;
color:#000;
border-bottom:dashed 1px #dfdfdf;
user-select: none;
}

li a:hover{
background-color:#b2d7f6;	
display:block;
padding:5px 3px;
text-decoration:none;
border-bottom:dashed 1px #dfdfdf;
user-select: none;
}

span .cat{
background-color:#3b5998;	
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px;
color:#fff;	
text-decoration:none;
}

.cat {
background-color:#3367d6;	
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px;
color:#fff;
text-decoration:none;
user-select: none;
}

.cat:hover{
  background-color:#3367d6; 
   color:#fff;
   /*font-style: italic;*/
}

.cat2 {
background-color:#ac6c34; 
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px ;
color:#fff;
user-select: none;
}

.cat3 {
background-color:#df3f13; 
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px;
color:#fff;
user-select: none;
}


.cat4 {
background-color:#3367d6;	
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px;
color:#fff;
text-decoration:none;
user-select: none;
}

.sub{
/*background-color:#6185d1; */
background-color:#bdb6b6;
font: bold 15px arial;
max-width: 272px;
display: block;
font-size:13px;
border: 0px solid;
padding: 6px 4px;
color:#000;
text-decoration:none;
user-select: none;
}


.cat::after, .cat2::after, .cat3::after, .sub::after{
  content: '\02795';
  display:inline-block;
  color:#fff;
  float:right;
  margin-right:10px;
  font-size:10px;
}

details[open] .cat::after, details[open] .cat2::after, details[open] .cat3::after, 
details[open] details[open] .sub::after{
  content: '\2796';
  display:inline-block;
  color:#fff;
  float:right;
  margin-right:10px;
  margin-bottom:10px;
}





.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}