body {display: flex; flex-direction: column; width: 98vw; margin-top: auto; padding-bottom: -100%;height: 70wh;}



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

  nav{


  }


main{flex-grow:1;}


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

footer{position: sticky; bottom:0; width: 100%; position: absolute; background-color: rgb(254, 254, 253); margin-top: auto; margin-bottom: -2%; text-align: center; position: fixed;}


select{border: 2ch; border-radius: 5px; color: rgb(37, 99, 104); font-weight: 900; text-decoration: none; width: 93%; font-family: 'Gill Sans MT'; text-align: center!important; font-size: 17.2px; border-color: antiquewhite;  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: 900; text-decoration: none; width: 100%; font-family: 'Gill Sans MT'; text-align: center!important;}



      
      .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);
      }