/*ATIVAcãO DO PRIMEIRO NIVEL*/
/*COLOCA FUNDO AMARELO QUANDO O MOUSE PASSA POR CIMA  */
nav a:hover {
  color: #ff0000; /*vermelho*/
  /*background:#FFFFF0 /* FloralWhite;*/
}
nav ul {
  position: absolute;
  display: flex;
  /*  border: 1px solid red;*/
  list-style: none;
  text-transform: uppercase;
  background: #fffff0 /* FloralWhite*/;
}
nav ul li a {
  /*primeira linha do menu */
  display: flex;
  color: #0000cc; /*azul/*#fff;*/
  margin-top: 0.2em;
  margin-left: 1em;
  text-decoration: none;
  font-size: 0.75em;
  font-weight: bold;
}
nav ul ul {
  /*MANTEM SEGUNDO NIVEL ESCONDIDO */
  display: none;
  list-style: none;
}
nav ul li:hover ul {
  /*ATIVAÇÃO DO SEGUNDO NIVEL*/
  display: flex;
  position: absolute;
  padding-right: 0.9em;
}
/*CONFIGURANDO E ATIVANDO O SEGUNDO NIVEL*/
nav ul ul li a {
  color: black; /*#0000CC;*/ /*#fff;*/
  text-decoration: underline;
  font-size: 0.65em;
  margin-top: 0.25em;
  margin-left: 1em;
}
/* O TERCEIRO NÃO FICA ESCONDIDO. FALTA O HOVER PARA O <a>*/
/*CONFIGURANDO E ATIVANDO O TERCEIRO NIVEL*/
nav ul li ul li ul li {
  /* SEM O LI FICA VIS�VEL DIRETO */
  display: none;
  list-style: none;
  margin: 0.1em;
  padding: 0.05em 0.1em 0.25em 0.05em;
}
nav ul li ul li:hover ul li {
  /*ATIVAÇÃO DO TERCEIRO NÍVEL*/
  display: flex;
  position: relative;
  /*  border: 1px solid BLUE;
    padding: 0.1em;
    color: #00FF7F;
    text-decoration: underline;
    font-size: 0.8em;
    /*padding: .02em .3em .6em .0em;*/
  /*font-weight: bold;*/
  /*background:#FFFACD; /*LemonChiffon */
}
nav ul li ul li ul li a {
  color: blue; /*#0000CC;*/ /*#fff;*/
  text-decoration: none;
  margin: 0.1em;
  font-size: 0.7em;
  font-weight: bold;
}
/* ********** TRANSFORMA EM RESPONSIVO **************/
/*@media screen and (max-width: 720px){*/
@media screen and (min-width: 300px) and (max-width: 720px) {
  /*BOTÃO AZUL DO MENU MINIMIZADO */
  .cabecalho .control-nav {
    position: absolute;
    right: 20px;
    top: 8px;
    display: block;
    width: 20px;
    padding: 2px 0;
    border: 2px solid #0000ff; /*Blue1*/
    border-width: 5px 0px;
    cursor: pointer;
    z-index: 2;
  }
  /*BOTÃO VERMELHO SOBRE O AZUL DO MENU MINIMIZADO */
  .cabecalho .control-nav:before {
    content: "";
    display: block;
    height: 5px;
    padding-left: 1em;
    background: #ff0000; /*red*/
  }
  /*CAIXA QUE SOBREPOE TODA A PAGINA-CONTROLE */
  .cabecalho .control-nav-close {
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    bottom: 0;
    padding: 5px;
    z-index: 1;
    border: 0px solid #ff0000; /*red*/
    background: rgba(0, 0, 0, 0);
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
  }
  /* TAMANHO CORES E TEMPO DO MENU RESPONSIVO LATERAL*/
  #control-nav:checked ~ .control-nav-close {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  #control-nav:checked ~ nav {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  /*MENU Controle dos menus com OS NOMES QUE SURGE NA DIREITA COM CHECKBOX ATIVO */
  .cabecalho nav {
    position: absolute;
    /*position: fixed;*/
    width: 10em;
    height: 35em;
    top: 3em;
    right: 3px;
    border: 0px solid green; /*#D3D3D3;/*LightGray*/
    /*background: #fffff0 ;/* FloralWhite*/
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
    z-index: 2;
  }
  /*PRIMEIRO NIVEL DOS NOMES DO MENU*/
  nav ul {
    flex-direction: column;
    display: block;
    width: 9.7em;
    height: auto;
    right: 0px;
    border: 0px solid red; /*#6e7b8b; /*LightSteelBlue4;*/
    /*padding: 3px 2xp 18px 2px;*/
    /*background:rgb(226, 230, 231);*/
    /*background:#FFFFF0 /* FloralWhite*/ /*;*/
  }
  /* media 2º ní­vel*/
  nav ul li {
    padding: 5px;
    /*border: .1px solid brown;/*#6E7B8B;/*LightSteelBlue4*/
    /*background:#FFFFF0 /* FloralWhite*/
  }
  nav ul li:hover ul {
    display: flex;
    position: static;
    /*background: #fffff0; /* FloralWhite*/
    /*FUNDO BRANCO COM O MOUSE*/
    background: white; /* FloralWhite*/
  }
  /* Afasta e define os nomes do primeiro nivel*/
  nav ul li a {
    font-size: 0.7em;
    font-weight: bold;
    margin: 0.3em 0 0.3em 0;
  }
  /*CONFIGURANDO E ATIVANDO O SEGUNDO NIVEL*/
  nav ul ul {
    display: none;
    width: 7.5em;
    border: 0px solid #006400; /*DarkGreen*/
  }
  nav ul ul li a {
    color: black; /*#0000CC;*/ /*#fff;*/
    text-decoration: underline;
    font-size: 0.7em;
    font-weight: bold;
    padding: 0.3em 0em 0.3em 0.1em;
  }
  /*CONFIGURANDO E ATIVANDO O TERCEIRO NIVEL*/
  nav ul ul ul {
    display: none;
    width: 6em;
    /*border: 0px solid rgb(45, 12, 192); /*#6E7B8B;*/
    /*margin: 1em 0em 0em 0.1em;*/
    /*padding: 0em 0em 0em 0em;*/
    /*background:rgb(211, 247, 235);/*LemonChiffon*/
  }
  /* O TERCEIRO NÃO FICA ESCONDIDO. FALTA O HOVER PARA O <a>*/
  nav ul li ul li ul li {
    /* SEM O LI FICA VISÃO DIRETO */
    display: none;
    list-style: none;
    /*margin: 0.2em 0.2em 0.2em 0em;*/
  }
  /* Afasta e define os nomes do segundo nivel*/
  nav ul li ul li ul li a {
    color: blue;
    text-decoration: none;
    font-size: 0.7em;
    font-weight: bold;
    padding: 2px 0em 2px 2px;
  }
  /*ATIVAÇÃO DO TERCEIRO NÍVEL*/
  nav ul li ul li:hover ul li {
    display: flex;
    position: relative;
    /*padding: 0;*/
    color: blue;
    text-decoration: none;
    font-size: 0.7em;
    font-weight: bold;
  }
}