@charset "utf-8";
/* CSS Document */

* {margin:0; padding:0;}

.grid{
  display: grid;
  grid-template-columns: "1fr";
  grid-template-rows: 100px max-content max-content auto;
  grid-template-areas: 
  "topo"
  "conteudo"
  "rodape";
  gap: 1px; 
}


.btnlogin{
 width: 80%;    
 max-width: 200%;
 max-height: auto;  
 padding-right:10px; 
}

.logo {  
  max-width: 100%;
  max-height:100%;
  }
  
.obra {  
  max-width: 100%;
  max-height:100%;
  }

topo{
  background-color: #000000;
  grid-area: topo;
  display: flex;
  flex-direction: row;
  justify-content: space-between; 
  align-items: center;
  
}

h2 {  font-size: 150%;     }
ul li{
  display: inline;
  border-right: 1px solid #000;
  padding: 0 5px;
}

ul li:last-child{
  border: none;
}

conteudo{
  background-color: #FFF;
  grid-area: conteudo;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  margin: 5%;
}


rodape{
  background-color: #000000;
  min-height: 40px;
  grid-area: rodape;
  display: flex;
  justify-content: center;
  align-items: center;
}

.texto{
  font: 13px  Arial, Verdana;color:#fff; margin:1% ; 
}

h2{font-size:17px;color:#000000;font-weight:bold;text-align:justify;text-indent:5px;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;line-height:20px;}
#formulariolog{width:350px; height:auto; position:relative; margin:0 auto; overflow:hidden; background-color:#E6E1D2; border:solid 2px #000000; border-radius:5px; padding:30px;}
label{width:60px; height:30px; float:left; color:#333; line-height:36px; margin:2px;font-size:14px;font-weight:bold;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
.login{width:200px; height:30px; float:left; overflow:hidden; border:solid 1px #423A24; border-radius:5px; margin:2px; }
.logar{width:auto; height:auto; position:relative; float:right; margin:5px; padding:5px; background-color:#000000; border:none; color:#fff; cursor:pointer;}

#formlogweb{width:350px; height:auto; margin:auto; background-color:#E6E1D2; border:solid 2px #000000; border-radius:5px; padding:30px;
   display: flex;
  flex-direction: row;
  
  justify-content: center; 
  align-items: center;
}

.btnwebm{width:400px; height:auto; position:relative; float:center; margin:5px; padding:5px; background-color:#000000; border:none; color:#fff; cursor:pointer;}

.menu {
    display: grid;
    grid-columns: "1fr";
    top:2px;
    justify-content: center;
    text-align: center;
    margin: 3px 10px 0;
    padding:1%;

}

.menu li{
    list-style: none;
    display: inline-block;
    max-width:200px;
    font-size:16px;color:#000000;font-weight:bold;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color:#ffffff;
}

.menu a {
    display: block;
    color: #ffffff;
    padding: 10px 10px 6px;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 4px solid transparent;
}

.menu a:hover {
    background-color: #555;
    color: #ffffff;
    border-bottom: 4px solid #ffffff;
}

@media (max-width: 700px){
.logo {  
  max-width: 80%;
  max-height:80%;
  }
  .obra {  
  max-width: 80%;
  max-height:80%;
  }
  conteudo{
  background-color: #FFF;
  grid-area: conteudo;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  margin: 2%;
}
  h2{font-size:15px;color:#000000;font-weight:bold;text-align:center;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;line-height:20px;}
  .texto{ font: 11px  Arial, Verdana;color:#fff; margin:auto ; }  
  #formulariolog{width:300px; height:auto;  margin:5px; overflow:hidden; background-color:#E6E1D2; border:solid 2px #000000; border-radius:5px; padding:10px;}

}