.topo{ width:100%; position:relative;} /*Essa aqui é a div que tem que ter a posição relativa para o seu menu*/
.topo strong{ display:none;}
#container{ width:100%; padding:0; transition:all 0.2s linear; }/*Essa aqui é a div que vai andar quando o menu for ativado */
#container.menu-on{ padding:0 0 0 260px;}

/*Configurações Padrões*/
ul.menu, .menu li, .menu a{ margin:0; padding:0; list-style:none; text-decoration:none;}
ul.menu ul{ position:absolute; display:none; box-shadow:3px 3px 2px #3C3C3C;}

/* Configurações nivel 1*/
ul.menu{ float:left; font-family:arial; font-size:15px; border-radius:5px; padding:0px;}
.menu li{ float:left; width:100%; position:relative;border-radius:5px;}
.menu li a{border-radius:5px;  width:190px;display:block; padding:0px 5px; line-height:28px; height:28px; float:left; transition:all 0.1s linear; }

/* Configurações nivel 2*/
.menu li:hover > ul.submenu-1{ display:block; top:45px; left:0; padding:5px; width:200px; border-radius:0 0 5px 5px;   }
.menu ul.submenu-1 a{  width:160px; padding:0 20px; border-radius:5px; height:30px; line-height:28px; }

/*Configurações de cores*/

/*nivel 1*/
.menu{background:white;text-align:left;border:1px solid #3C3C3C; }
.menu a{color:black;font-size:90%;font-weight:}
.menu li:hover > a{ background:#523E43;  color:white;}

/*nivel 2*/
.submenu-1{ background:#2A2B40;}
.submenu-1 a{color:white;font-size:90%;font-weight:;}
.submenu-1 li:hover > a{ background:#666; }





 #menu2, #menu2 * {float:left;
  padding:0px;
  list-style-type:none;
  height:auto;
  text-align:center;
  font-size:95%;

   }



  #menu2 li a :hover * {margin-left:10px;padding:0px;list-style-type:none; height:;text-align:center;
                      }



  #menu2 li {text-align:center;
    float:left;
    height:auto;
    list-style-type:none;
    border-right:1px solid black;

       }


  #menu2 li a, #menu2 li a:link {
    width:auto;
    padding:10px;
    text-align:center;
    display: block;

      }

   #menu2 li a:hover {
    background:#523E43 ;
    height:auto;
    width:auto;
    text-decoration:none;
    color:white;
    }


    .tit {text-align:left;color:white;font-weight:bold;
       width:160px;height:50px; line-height:47px;background:#3C3C3C;

        }




  #menu_rodape  {
     font-weight:;
     border-right:0px solid gray;
     height:auto;
     float:right;
     width:100%;
     padding:10px;
     font-size:85%;
     margin:20px 0px 20px 0px;
    }


  #menu_rodape a, #menu_rodape a:link { line-height:2px;
    width:px;
    background:;
    color:#666666;
	text-decoration: none;
    text-align:;
    display: ;
    font-size:90%;
     }

   #menu_rodape a:hover {
    border-style:;
	color: red ;
    border-width:px;
    border-color:;
	background-color:;
    text-decoration:;}





 /*Configuração para mobile----------------------------------------------------------------------*/








@media only screen and (max-width:900px){


/*Configuração do nivel responsivo*/
.topo strong{ display:block; background:#3C3C3C; float:left; padding:15px 15px 14px; font-family:arial;font-style:normal; font-size:100%; margin:0 0 0 15px; }

ul.menu{z-index: 1; width:260px; border-radius:0px; padding:0; position:absolute; top:0; left:-260px;}

.menu li{ width:100%; border-bottom: 1px solid;}
.menu li a{ width:100%;line-height:45px; height:45px; box-sizing:border-box; -webkit-box-sizing:border-box; border-radius:0;}

.menu li:hover > a{ background:none;}

ul.menu ul, .menu li:hover > ul.submenu-1{ display:block; position:relative; float:left; top:auto; left:auto; box-shadow:none; width:100%; padding:0px;  box-sizing:border-box; -webkit-box-sizing:border-box; background:none; padding:0 0 20px 20px; }

.menu ul.submenu-1 li{ border:none; background:gray;}
.menu ul.submenu-1 a{width:100%; border-left:1px solid #000; border-radius:0;background:gray;}


/*--Botão do Menu--*/
.topo i{cursor:pointer; display:block; width:100%; height:auto; float:left; padding:0 15px;}
.topo i b{margin-top: 23px;}
.topo i b, .topo i b:before, .topo i b:after{cursor:pointer; height:2px; width:20px; position: absolute; display: block; content: '';  -webkit-transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47); transition: all 500ms cubic-bezier(0.615, 0.25, 0.505, 1.47);}
.topo i b:before{ top: -6px;}
.topo i b:after{bottom: -6px;}

 /*Configuração do botão do menu ativo*/
.menu-on .topo i b{background-color: transparent;}
.menu-on .topo i b:before, .menu-on .topo i b:after{top: 0;}
.menu-on .topo i b:before{ -webkit-transform: rotate(45deg) scale(1.2); -ms-transform: rotate(45deg) scale(1.2); transform: rotate(45deg) scale(1.2);}
.menu-on .topo i b:after{-webkit-transform: rotate(-45deg) scale(1.2); -ms-transform: rotate(-45deg) scale(1.2); transform: rotate(-45deg) scale(1.2);}


/*========= Configuração de Cores ==============================*/


/*Configura de cores do menu responsivo*/
.menu{background:#3C3C3C;border:none; }
.menu li{border-color:#E7E7E7;color:white;font-size:120%;border-radius:0px;  }
.menu li a, .menu li:hover > a{ color:white;border-radius:0px; }
.menu ul.submenu-1 a{ border-color:#E7E7E7; color:white;}

/*Cor do botão do menu*/
.topo i{ background:#3C3C3C;color:white;}
.topo i b, .topo i b:before, .topo i b:after{ background:white;color:white;}




 #menu2, #menu2 * {
  margin:0px;
  padding:0px;
  list-style-type:none;
  height:auto;
  text-align:center;
  


  }


  #menu2 li a:hover * { font-weight:normal;;margin:0px auto;padding:0px;list-style-type:none; height:;text-align:center;}



  #menu2 li {text-align:center;
    height:auto;
    margin:0px auto;
    font-weight:normal;
    font-size:95%;


       }


  #menu2 li a, #menu2 li a:link {
    font-weight:normal;
    margin:0px;
    text-align:center;
    display: block;
    font-size:100%;
    padding:15px 10px 10px 10px;
    width:auto;
     }

   #menu2 li a:hover {
    background:gray ;
    height:25px;
    width:auto;
    padding:15px 10px 10px 10px;
    font-weight:normal;
    }

   .tit {text-align:left;color:white;font-weight:bold;
       width:150px;height:60px; line-height:57px;background:#FF7C05;
       display:block;
       position:relative;
       transition:all 0.1s linear;
        }








  #menu_rodape  {
     font-weight:bold;
     border-right:0px solid gray;
     height:auto;
     float:right;
     width:auto;
     padding:10px;
     font-size:85%;
     margin:20px 0px 20px 0px;
    }


  #menu_rodape a, #menu_rodape a:link { line-height:2px;
    width:px;
    background:;
    color:#666666;
	text-decoration: none;
    text-align:;
    display: ;
    font-size:90%;
     }

   #menu_rodape a:hover {
    border-style:;
	color: red ;
    border-width:px;
    border-color:;
	background-color:;
    text-decoration:;}




}