body {display: flex;
flex-direction: column;
width: 100vw;
margin-top: auto;
overflow-x: hidden;
width: 100vw!important;
height: 100vh!important;
margin: 0!important;
padding: 0!important;
box-sizing: border-box!important;
}

header{
  position: sticky; top:0; position: fixed;
  width: 100%; background-color: rgb(242, 244, 242); padding: 1%;}

main {flex-grow:1;}

footer {position: absolute; position: fixed; display: flex; justify-content: space-evenly; width: 100%; padding: 0rem 0.9rem 0.1rem; box-sizing: border-box; align-items: center; text-align: center; font-size: 10pt; bottom: 0!important; left: 0!important; right: 0!important;}

.rodape{
  max-width: 20%; align-items: center; text-align: center;
  display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 0rem 0.7rem 0.2rem; color: #000;
}

.icones {
  width: 100%;
  padding: 0.15rem 0.8rem 0.3rem;}

select{border: 2ch; border-radius: 5px; color: rgb(37, 99, 104); font-weight: 600; text-decoration: none; width: 93%;
background-color: white;
font-family: 'Gill Sans MT'; text-align: center!important;
border-color: rgb(241, 227, 209);  margin: 3px; margin-top: 6px; padding-top: 16px; padding-bottom: 15px; padding-right: 2px;
}

h2{margin-left: 2%; text-align: left; font-family: Gill Sans MT; font-size: 9pt; color: rgb(54, 57, 77)}
ul{list-style:none; font-weight: 800; text-decoration: none; width: 100%; font-family: 'Gill Sans MT'; text-align: center!important;}

/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;
    margin: 0;
    overflow-x: hidden;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: rgb(242, 244, 242);
    padding: 1%;
    z-index: 100;
}

main {
    overflow-y: auto;
}

div {
    background-size: 100%;
    background-repeat: no-repeat;
}

footer {
    position: fixed;
    overflow: hidden;
    bottom: 0;
    width: 100%;
    background-color: rgb(254, 254, 253);
    text-align: center;
    z-index: 100;}
    
/* Media Queries para telas menores */

@media (max-width: 768px) {
    header {
        padding: 2%;
    }

    footer {
        padding: 3%;
    }

    select {
        font-size: 16px;
    }

    h2 {
        font-size: 14px;
    }
}


      
      .cag-list {
        list-style: none;
        display: flex;

      }
      
      .cag-list li {
        font-size: 10pt;
      }
      
      .cargos-menu {
        cursor: pointer;
      }
      
      .cargos-menu div {
        width: 30px;
        height: 3px;
        background: #fff;
        font-size: 10pt;
        margin: 7px;
        transition: 0.1s;
      }
      
        body {
          overflow-x: hidden;
        }

        .cag-list {
          position: absolute;
          top: 10vh;
          left: 0;
          width: 50vw;
          height: 50vh;
          background: none;
          flex-direction: column;
          font-size: 10pt;
          align-items: center;
          justify-content: space-around;
          transform: translateX(-100%);
          transition: transform 0.1s ease-in;
        }
        .cag-list li {
          margin-left: 0;
          opacity: 0;
        }
        .cargos-menu {
          display: block;
        }
      
      
      
      .cag-list.active {
        transform: translateX(0);
      }
      
      @keyframes cagLinkFade {
        from {
          opacity: 0;
          transform: translateX(-50px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      .cargos-menu.active .line1 {
        transform: rotate(-45deg) translate(-8px, 8px);
      }
      
      .cargos-menu.active .line2 {
        opacity: 0;
      }
      
      .cargos-menu.active .line3 {
        transform: rotate(45deg) translate(-5px, -7px);
      }
      
      

      
      
      
      
      
      .per-list {
        width: 70vw;
        list-style: none;
        display: flex;
        font-size: 10pt;
      }
      
      .per-list li {
        margin-left: 32px;
        font-size: 10pt;
      }
      
      .perfil-menu {
        cursor: pointer;
      }
      
      .perfil-menu div {
        width: 30px;
        height: 3px;
        background: black;
        margin: 7px;
        transition: 0.01s;
      }
      
        body {
          overflow-x: hidden;
        }
        .per-list {
          position: absolute;
          font-size: 10pt;
          top: 10vh;
          right: 0;
          width: 70vw;
          height: 30vh;
          background: none;
          flex-direction: column;
          align-items: center;
          justify-content: space-around;
          transform: translateX(100%);
          transition: transform 0.01s ease-in;
        }
        .per-list li {
          color: #F2F2F2;
          font-size: 10pt;                
          margin-left: 0;
          opacity: 0;
        }
        .perfil-menu {
          display: block;
        }
      
      
      
      .per-list.active {
        transform: translateX(0);
      }
      
      @keyframes perLinkFade {
        from {
          opacity: 0;
          transform: translateX(50px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }
      
      .perfil-menu.active .line4 {
        transform: rotate(-45deg) translate(-7px, 8px);
      }
      
      .perfil-menu.active .line5 {
        opacity: 0;
      }
      
      .perfil-menu.active .line6 {
        transform: rotate(45deg) translate(-6px, -7px);
      }