header{
    background-color: lightgray;
    text-align: center;
    align-items: center;
 
    height: auto;
    min-height: 175px;
    width: 100%;
    float: left;
    overflow: hidden;
  }
 
 header .logoHeader{
     height: 150px;
     width:  150px;
     float:  left;
 }
 header .instHeader{
    width:  417px;
    float:  left;
}

header h3{
    color: #343a40;
    text-shadow: #707070 0.1em 0.1em 0.2em;
    font-size: 25px;
    font-family: OpenSans-Bold;
}

 header .container{
     font-family: AbrilFatface, Arial, Helvetica, sans-serif;
     height: 160px;
     width:  auto;
     float: left;
     height: auto;
     overflow: auto;
   }
 
   header .container p{
     font-family: AbrilFatface, Arial, Helvetica, sans-serif;
     color: green;
     width:  auto;
     float: left;
   }
 
   .headersubbox{
 
   }
 
   .headerbox{
     align-items: center;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: center;
   }
 
 
   @media screen and (min-width: 500px) {
     footer{
       padding-left: 60%;  
     }
   }
   
   footer{
     background-color: lightgray;
     text-align: justify;
     float: left;
     min-height: 85px;
     height: auto;
     width: 100%;
     padding-left: 5%;  
     font-size: small;
   }
 
   main{
     float: left;
     min-height: 500px;
     width: 100%;
     background-color: snow;
     background-image: url("bemvindo2.png");
     background-repeat: no-repeat;
     background-position: center;
     background-size: contain;
 
   }
   body{
     overflow: auto;
     background-color: black;
 
   }
 
   #loginIco{
     height: 32px;
     width: 32px;
     margin: 5px 25px 5px 5px;
     content: url('login.png');
   }
 
   #loginIco:hover > img {
     content: url('loginhover.png');
   }
   #logo{
     height:             32px;
     width:              32px;
     margin:             5px 25px 5px 5px;
     content:            url("cleber.png");
     background:         #707070;
     -moz-border-radius:   16px;
     -webkit-border-radius:16px;
     border-radius:        16px;
   }
 
   
 
   #paletacores{
     background-color: #dc3545;
     background-color: #007bff;
     background-color: #d3d3d3;
     background-color: #343a40;
     background-color: #28a745;
     background-color: #707070;
   }
 
   h3{
     color:       #3669a2;  
     font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight:  bold;
     font-size:    32px;  
   }
 
   nav a{
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     font-weight: bold;
   }
 
   .titulo{
     font-weight:  bold;
     font-size:    20px;  
     font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     text-align:   center;
     line-height:  180px;
   }
   .tituloP{
     font-weight: bold;
     font-size:   14px;  
     font-family:  'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     text-align:  center;
     line-height: 180px;
   }
 
   .tituloG{
     font-weight: bold;
     font-size:   32px;  
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     text-align:  center;
     line-height: 180px;
   }