@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

    * {
        padding: 0;
        margin: 0;
        transition: 0.4s ease all;
        box-sizing: border-box;
    } 

    img {
      pointer-events: none;
    }

    html {
      scroll-behavior: smooth !important;
    }

    body {
        font-family: 'Roboto', sans-serif;
        font-weight: 300;
        font-size: 15px;
        line-height: 1.4;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .container{
        max-width: 1200px;
        margin: calc(5% + 80px) auto 5% auto;
        flex:1;
    }

    h1 {
        font-weight: 700;
        font-size: 2.25rem;
        line-height: 1.2;
        margin-bottom: 1.5rem;
    }

    h1.titulo-site {
      font-size: 1.75rem;
      font-weight: 300;
      margin-bottom: 0.75rem;
    }

    .logo {
      margin-bottom: 2rem;
      width: 500px;
      margin-left: 3px;
    }

    h2 {
      font-weight: 300;
      font-size: 1.5rem;
      margin-top: 1.25rem;
      margin-bottom: 0.75rem;
    }

    h3 {
      font-weight: 500;
      font-size: 1rem;
      margin-bottom: 1rem;
    }

    .subtitulo {
        font-weight: 300;
    }

    p {
        margin-bottom: 0.75rem;
    }

    b {
      font-weight: 700;
    }

    a {
    text-decoration: none;
    color: black;
    transition: none;
    cursor: pointer;
    }

    header {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 2;
      background-color: white;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px;
    }


    footer {
      background-color: #f0f0f0;
    }

    .rodape {
      max-width: calc(1200px - 6rem);
      text-align: left;
      margin:auto;
      padding: 2rem 3rem;
      box-sizing: unset;
    }

    .rodape p, .rodape a {
      margin-bottom: 0;
      font-size: 0.75rem;
      line-height: 1.6;
    }

    .nota {
      margin-bottom: 1rem;
    }

  /* Style the buttons that are used to open and close the accordion panel */
    .accordion {
      background-color:white;
      color: black;
      cursor: pointer;
      padding: 0.75rem;
      width: 100%;
      text-align: left;
      border: none;
      border-bottom: 1px solid black;
      outline: none;
      font-size: inherit;
      font-weight: 300;
      font-style:italic;
    }

    /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
    .active, .accordion:hover {
      background-color:#f0f0f0;
    }

    /* Style the accordion panel. Note: hidden by default */
    .panel {
      padding: 0.75rem 0.75rem 0 0.75rem;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      font-style: italic;
      line-height: 1.6;
      font-size: 0.9rem;
      text-align: justify;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      margin-bottom: 0.75rem;
    }
    
    .accordion:after {
      content: '\002B';
      float: right;
      margin-left: 10px;
      font-style:normal;
    }

    .active:after {
      content: "\00D7";
      font-style:normal;
    }

    .row {
      display: flex;
      margin:0 0 2.25rem 0;
      padding:0 3rem;
    }

    .grupo-cards-framework {
      display: flex;
      margin:1rem 0 2.25rem 0;
      padding:0 3rem;
    }

    .explicacao, .formulario, .mensagens-form, .downloads {
      padding: 0 3rem;
    }

    .fatores {
      padding-bottom: 1.25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid #c9c9c9;
    }

    .fatores:last-child, .fatores:nth-last-child(2) {
      border-bottom:0;
      margin-bottom:0;
      padding-bottom:0;
    }

    .fatores h3 {
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
    }

    .grupo-tabs, .grupo-tabs-fatores, .grupo-publicacoes {
      display: flex;
      flex-wrap: wrap;
      margin: 1.75rem 0 0 0;
      padding:0 3rem;
    }

    .grupo-cards-framework {
      flex-wrap: wrap;
    }

    .grupo-subfatores {
      display: flex;
      flex-wrap: wrap;
      
    }
    
    .subfatores {
      border: 1px solid;
      width: calc(50% - 1.25rem);
      margin: 0 1.25rem 1.25rem 0;
      padding: 1.25rem 1.5rem 0.75rem 1.5rem;
      background-color: white;
      border-radius: 15px;
      flex: 1 auto;
    }

    .subfatores:last-child {
      align-self: flex-start;
    }

    .subfatores:nth-child(even) {
      margin-right:0;
    }

    .subfatores h4 {
      margin-bottom: 0.75rem;
      font-style: italic;
      font-weight: 500;
    }

    .left {
      max-width:calc(600px - 3rem);
      display: flex;
      flex-direction: column;
      align-self: center;
      padding-right: 3rem;
      box-sizing:unset;
    }
    
    .right {
      width: 600px;
      padding: 0;
    }

    #right {
      width: 800px;
      align-self: center;
    }

    #left {
      min-width: 600px;
    }

    .explicacao p, .downloads p {
      max-width: calc(600px - 3rem);
    }

    .grupo-cards {
      display: flex;
    }

    .cards {
      border: 1px solid #c9c9c9;
      width: 50%;
      margin: 0.75rem 1.5rem 1.5rem 0;
      padding: 1rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      border-radius: 15px;
    }

    .cards-framework {
      border: 1px solid #c9c9c9;
      width: calc(25% - 0.75rem);
      margin: 0 0.75rem 0.75rem 0;
      padding: 1.5rem;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: white;
      box-sizing: border-box;
      border-radius: 15px;
    }

    .cards:hover, .cards-framework:hover, .grupo-publicacoes a:hover {
      border-color:#706f6f;
      transform: scale(1.04);
      transition: 0.4s ease all;
    }
    
    .cards-framework img {
      width:120px;
    }

    .cards-framework p {
      margin-top: 0.75rem;
      font-size: 14px;
    }

    .cards p {
      margin:0;
      font-size: 14px;
    }

    .cards:last-child, .cards-framework:last-child {
      margin-right: 0;
    }

    .icones {
      width: 120px;
      margin-bottom: 0.75rem;
    }

    .botao-acesse {
      background-color: #173d7a;
      padding: 1rem;
      text-align: center;
      font-weight: 500;
      margin: 1rem 0;
      width: 180px;
      color:white;
      border-radius: 100px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.8rem;
    }

    .tab {
      width: calc(20% - 0.75rem);
      margin-right: 0.75rem;
      overflow:hidden;
      background-color: white;
    }

    .tab:hover, .tab-fatores:hover {
      transform: scale(1.04);
    }

    .tab-fatores {
      width: calc(25% - 0.75rem);
      margin-right: 0.75rem;
      overflow:hidden;
      background-color: white;
    }

    .tab:last-child, .tab-fatores:last-child {
      margin-right: 0;
    }

    .conteudo-tab {
      font-weight: 700;
      padding: 0.75rem;
      text-transform: uppercase;
      font-size: 0.8rem;
      letter-spacing: 1px;
      border-bottom: 1px solid black;
      /*transition: none !important;*/
    }

    .tab-destaque:hover:after {
      color:black;
    }

    .eixos {
      padding: 1.75rem 3rem 0 3.75rem;
      display: none;
      position:relative;
      /* animation:animatebottom 0.4s; */
    }

    @keyframes animatebottom {
      from {
        top:-2.25rem;
        opacity:0
      }
      to {
        top:0;
        opacity:1
      }
    }

    .tab-destaque {
      border-width: 4px;
      /*font-weight: 700;*/
    }

    .tab-destaque:after {
      content: "\00D7";
      font-style:normal;
      float:right;
      font-weight: 300;
      color: #c9c9c9;
    }
    

    .descricao-eixo {
      max-width: calc(50% - 1.125rem);
      margin-bottom: 1.75rem;
      font-style: italic;
      font-weight: 500;
    }

    .fatores p {
      margin-bottom: 1.25rem;
      max-width: calc(600px - 4.5rem);
    }

    .subfatores {
      max-width: calc(50% - 0.625rem);
    } 

    .orientacoes {
      column-count: 2;
      column-gap: 1.5rem;
    }

    .orientacoes p, .subeixo p, .subeixo-uma-col p, label.check {
      break-inside: avoid !important;
      
    }

    .grupo-subeixos {
      display:flex;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .subeixo {
      width: calc(50% - 1.5rem);
      padding: 1.25rem 1.5rem 0.75rem 1.5rem;
      border: 1px solid black;
      margin-top: 1.75rem;
      flex: 1 auto;
      border-radius: 15px;
    }

    .subeixo:first-child {
      margin-right: 1.5rem;
    }

    #tab-organizacao h3 {
      color: #996f53;
    }

    #tab-fluxo h3 {
      color: #c08c6a;
    }

    #tab-organizacao {
      border-color:#996f53;
    }

    #tab-fluxo {
      border-color:#c08c6a;
    }

    #usabilidade-top h3 {
      color: #4d7d7c;
    }

    #usabilidade-bottom {
      border-color: #4d7d7c;
    }

    #usabilidade-top {
      border-color: #4d7d7c;
    }

    #tab-conceito-1200, #tab-conceito-960 {
      border-color:#d13041;
      color: #d13041;
    }

    #tab-conteudo-1200, #tab-conteudo-960 {
      border-color:#6c493f;
      color:#6c493f;
    }

    #tab-funcionalidades-1200, #tab-funcionalidades-960 {
      border-color: #ec6649;
      color:#ec6649;
    }

    #tab-experiencia-1200, #tab-experiencia-960 {
      border-color:#00a1ae;
      color:#00a1ae;
    }

    #tab-superficie-1200, #tab-superficie-960 {
      border-color:#efc865;
      color: #efc865;
    }

    #tab-primarios-1200, #tab-primarios-960 {
      border-color:#57b7c2;
      color: #57b7c2;
    }
    
    #tab-secundarios-1200, #tab-secundarios-960 {
      border-color:#83a8bb;
      color: #83a8bb;
    }

    #tab-terciarios-1200, #tab-terciarios-960 {
      border-color:#d9d5c2;
      color: #aeaca1;
    }

    #tab-subfator-terciario {
      border-color:#d9d5c2;
    }

    #tab-subfator-primario {
      border-color:#57b7c2;
    }
    
    #tab-subfator-secundario {
      border-color:#83a8bb;
    }

    #fator-terciario {
      background-color:#aeaca1;
      color: white;
      width: fit-content;
      padding: 0.25rem 0.50rem;
    }

    #fator-primario {
      background-color:#57b7c2;
      color: white;
      width: fit-content;
      padding: 0.25rem 0.50rem;
    }
    
    #fator-secundario {
      background-color:#83a8bb;
      color: white;
      width: fit-content;
      padding: 0.25rem 0.50rem;
    }

    #tab-outros-1200, #tab-outros-960 {
      color: #706f6f;
      border-color: #706f6f;
    }

    #tab-conceito-1200:hover, #tab-conceito-960:hover, #tab-conteudo-1200:hover, #tab-conteudo-960:hover, #tab-funcionalidades-1200:hover, #tab-funcionalidades-960:hover, #tab-experiencia-1200:hover, #tab-experiencia-960:hover, #tab-superficie-1200:hover, #tab-superficie-960:hover, #tab-primarios-1200:hover, #tab-primarios-960:hover, #tab-secundarios-1200:hover, #tab-secundarios-960:hover, #tab-terciarios-1200:hover, #tab-terciarios-960:hover, #tab-outros-1200:hover, #tab-outros-960:hover {
      border-bottom: 4px solid;
    }

    #outros .fatores {
      columns: 2;
      column-gap: 1.25rem;
      border-bottom:0;
      margin-bottom: 1rem;
    }

    #outros .fatores p {
      max-width: unset;
    }

    #outros img {
      max-width: 810px;
    }

    .subeixo-uma-col-titulo {
      column-count: 2;
      column-gap: 1.5rem;
      padding: 1.25rem 1.5rem 1.25rem 1.5rem;
      margin-top: 1.75rem;
      border-top: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-radius: 15px 15px 0 0;
    }

    .subeixo-uma-col {
      column-count: 2;
      column-gap: 1.5rem;
      padding: 0 1.5rem 1.5rem 1.5rem;
      border-bottom: 1px solid;
      border-left: 1px solid;
      border-right: 1px solid;
      border-radius: 0 0 15px 15px;
    }
    

    /* Customize the label (the container) */
    .check {
      display: block;
      position: relative;
      padding-left:   1.25rem;
      margin-bottom: 0.75rem;
      
    }

    /* Hide the browser's default checkbox */
    .check input {
      position: absolute;
      opacity: 0;
      height: 0;
      width: 0;
    }

    /* Create a custom checkbox */
    .checkmark {
      position: absolute;
      top: 3px;
      left: 0;
      height: 15px;
      width: 15px;
      background-color: #f0f0f0;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #c9c9c9;
    }

    /* On mouse-over, add a grey background color */
    .check:hover input ~ .checkmark {
      background-color: #c9c9c9;
    }

    /* When the checkbox is checked, add a blue background */
    .check input:checked ~ .checkmark {
      background-color: #f0f0f0;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
      content: "";
      position: absolute;
      display: none;
    }

    /* Show the checkmark when checked */
    .check input:checked ~ .checkmark:after {
      display: block;
    }

    /* Style the checkmark/indicator */
    .check .checkmark:after {
      left: 4px;
      top: 1px;
      width: 3px;
      height: 6px;
      border: solid black;
      border-width: 0 2px 2px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .check input:checked ~ .control-me {
      text-decoration: line-through;
    }

    .control-me {
      cursor: initial;
    }

    .figura {
      text-align: right;
      flex: 1;
      align-self: center;
    }

    #figura-conjunto {
      max-width: 550px;
    }

    #figura-inicial {
      width: 42%;
      min-width:500px;
      z-index: -1;
      position: absolute;
      right:3rem;
      top: 210px;
    }

    #figura-relacoes {
      height: 395px;
      width: auto;
      margin-top:0;
      margin-bottom: 1.25rem;
      margin-left: 2rem;
      float:right;
    }

    #right-relacoes {
      width:auto;
      height: min-content;
      padding-left: 3rem;
      box-sizing: unset;
    }

    #left-relacoes {
      width: calc(100% - 6rem);
      box-sizing: unset;
      padding-right:0;
      display:block;
      padding: 0 3rem;
      overflow: auto;
      max-width: 850px;
      margin-bottom: 2.25rem;
    }

    .botao-topo {
      transition: none !important;
      width: 100px;
      margin: 2.25rem auto;
      text-align: center;
      color: #706f6f;
    }

    .botao-topo img {
      width: 15px;
    }

    .botao-topo p {
      margin-top: 0.2rem;
      font-size: 0.8rem;
    }

    .botao-topo:hover {
      color: black;
    }

    .formulario {
      max-width: calc(600px + 3rem);
    }

    input[type=text], input[type=email], textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #c9c9c9;
      border-radius: 5px;
      box-sizing: border-box;
      margin-top: 0.5rem;
      margin-bottom: 1rem;
      resize: vertical;
      font-size: 0.8rem;
      font-weight: 300;
      font-family: 'Roboto', sans-serif;
    }
    
    .botao-enviar {
      background-color: #173d7a;
      padding: 1rem 2rem;
      text-align: center;
      font-weight: 500;
      margin: 1rem 0 2rem 0;
      color:white;
      border-radius: 100px;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 0.8rem;
      border: none;
      cursor: pointer;
    }
    
    .botao-enviar:hover, .redes-sociais:hover, .botao-acesse:hover {
      background-color: #ff2e56;
      transform: scale(1.04);
      transition: 0.4s ease all;
    }

    .sobrescrito {
      vertical-align: top;
      position:relative;
      top: -1px;
      font-size: x-small;
    }

    .grupo-publicacoes a {
      border: 1px solid #c9c9c9;
      width: calc(250px - 1.25rem);
      max-width: calc(600px - 3rem);
      margin: 0 1.25rem 1.25rem 0;
      padding: 1.5rem 1.5rem 1.25rem 1.5rem;
      background-color: white;
      border-radius: 15px;
      flex: 1 auto;
    }

    .grupo-publicacoes a:last-child {
      max-width: calc(600px - 4.25rem);
    }

    .grupo-publicacoes h4 {
      font-weight: 500;
      font-size: 0.9rem;
      margin-bottom: 0.5rem;
    }

    .grupo-publicacoes p {
      margin-bottom: 0;
      font-size: 0.9rem;
    }

    .categoria-publicacao {
      font-size: 0.75rem;
      font-style: italic;
      padding: 0.25rem 0.5rem;
      border: 1px solid;
      border-radius: 5px;
      border-color: #173d7a;
      color: #173d7a;
      width: max-content;
      margin-bottom: 0.75rem;
    }

    .grupo-redes-sociais {
      display: flex;
      flex-direction: row;
      margin-top:0.5rem;
    }

    .redes-sociais {
      width: 45px;
      height: 45px;
      border-radius: 100%;
      background-color: #173d7a;
      margin-right: 0.5rem;
      flex-shrink: 0;
    }

    #rg {
      background-image: url(imagens/rg.svg);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: center;
    }

    #academia {
      background-image: url(imagens/academia.svg);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: center;
    }

    #lattes {
      background-image: url(imagens/lattes.svg);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: center;
    }

    #linkedin {
      background-image: url(imagens/linkedin.svg);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: center;
    }

    #orcid {
      background-image: url(imagens/orcid.svg);
      background-repeat: no-repeat;
      background-size: 45%;
      background-position: center;
    }

    .anchor{
      display: block;
      height: 79px; /*same height as header*/
      margin-top: -79px; /*same height as header*/
      visibility: hidden;
    }

    /*menu desktop e mobile*/
    
    /* Add a black background color to the top navigation */
    .topnav {
      max-width: calc(1200px - 6rem);
      text-align: left;
      margin:auto;
      padding: 2rem 3rem 1.25rem 3rem;
      overflow: hidden;
      box-sizing: unset;
      display: flex;
      align-items: baseline;
    }
    
    .topnav a:first-child:hover {
      border-bottom:0;
    }

    /* Style the links inside the navigation bar */
    .topnav a {
      float: left;
      display: block;
      text-decoration: none;
      font-size: 0.9rem;
      margin-right: 1rem;
      padding-bottom: 0.25rem;
      margin-bottom:0;
    }

    /* Change the color of links on hover */
    .topnav a:hover {
      border-bottom: 1px solid #173d7a;
    }

    /* Add an active class to highlight the current page */
    .topnav a.menu-ativo {
      border-bottom: 4px solid black;
    }

    /* Hide the link that should open and close the topnav on small screens */
    .topnav .icon {
      display: none;
    }

    .fa:hover, .fa-bars:hover {
      color: #ff2e56;
    }

    .fa:active, .fa-bars:active {
      color:#173d7a;
    }

    /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
    @media screen and (max-width: 650px) {

      .topnav {
        display: inherit;
        align-items: baseline;
      }

      .topnav a {
        display: none;
      }

      .topnav a:first-child {
        display: block;
      }

      .topnav a.icon {
        float: right;
        display: block;
        margin-right: 0;
      }

      .topnav a.icon:hover {
        border-bottom: 0;
      }
    }

    /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
    @media screen and (max-width: 650px) {

      .topnav {
        padding: 2rem 2rem 1.25rem 2rem;
        transition:none;
      }

      .topnav.responsive {
        position: relative;
        padding: 2rem 2rem 1rem 2rem;
        transition: none;
      }

      .topnav.responsive a.icon {
        position: absolute;
        right: 2rem;
        top: 2rem;
      }

      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
        width: fit-content;
        margin-bottom: 1rem;
      }
    }


    @media only screen and (min-width: 960px) {
      .conjunto-960, .fatores-960 {
        display: none;
      }

    }


    @media only screen and (max-width: 960px) {
      
      .conjunto-1200, .fatores-1200 {
        display:none;
      }

      #figura-outros-centralizado{
        display: none;
      }

      .container{
        max-width: none;
      }
      
      .row{
        display: block;
        margin-bottom:2.25rem;
      }

      .left {
        width: calc(600px - 3rem);
        padding:0;
      }
      
      .right {
        width: 100%;
        padding:0;
      }

      #right {
        width:auto;
        margin:1rem 0 3rem 0;
      }

      .figura {
        margin: 1rem 0;
        overflow: hidden;
        text-align:left;
        max-width: 600px;
      }
      
      .tab, .tab-fatores {
        width:calc(100% - 6rem);
        margin:0 3rem;
      }

      .eixos {
        padding: 1.25rem 3rem 0 3rem;
        margin-bottom: 1.25rem;
      }

      .descricao-eixo {
        max-width: 100%;
        margin-bottom: 1.25rem;
      }

      .grupo-subeixos {
        display:block;
        width:100%;
      }

      .subeixo {
        width:100% !important;
        margin: 0.75rem 0 1.25rem 0;
        padding: 1.75rem 1.75rem 0.75rem 1.75rem;
      }

      .subeixo-uma-col {
        padding:  0 1.75rem 1.5rem 1.75rem;
      }

      .subeixo-uma-col-titulo {
        padding:  1.75rem 1.75rem 0.75rem 1.75rem;
      }

      @keyframes animatebottom {
        from {
          top:-1.75rem;
          opacity:0
        }
        to {
          top:0;
          opacity:1
        }
      }

      #figura-inicial {
        width:350px;
        min-width:0;
        z-index: -1;
        top:90px;
        opacity: 0.3;
      }

      #left {
        min-width: 0;
      }

      .cards-framework {
        width: calc(50% - 0.75rem);
      }

      .cards-framework:nth-child(even) {
        margin-right: 0;
      }

      #row-relacoes {
        display: flex;
      }

      #left-relacoes p {
        max-width: unset;
      }

      #right-relacoes {
        padding-left: 1.75rem;
        width: calc(50% - 1.75rem)
      } 

      .fatores {
        margin-bottom: 2.5rem;
      }
      
      .fatores:nth-last-child(2) {
        border-bottom: 1px solid #c9c9c9;
        margin-bottom: 2.5rem; 
        padding-bottom: 1.25rem;
      }

    }

    @media only screen and (max-width: 860px) {

      #figura-index {
        text-align: center;
        margin: auto;
      }

      #figura-inicial {
        position: static;
        top: auto;
        left: auto;
        bottom: auto;
        right: auto;
        width: auto;
        max-width: 450px;
        opacity: 1;
      }

    }

    @media only screen and (max-width: 720px) {
      
      #figura-outros{
        display: none;
      }
      
      #figura-outros-centralizado{
        display: block;
      }

    }

    @media only screen and (min-width: 650px) {
      
      #figura-relacoes-block {
        display: none;
      }
    }


    @media only screen and (max-width: 650px) {
      
      #figura-relacoes-block {
        display: block;
        height: 395px;
        width: auto;
        margin-top: 2rem;
      }

      #figura-relacoes {
        display: none;
      }

      .row, .grupo-cards-framework,  .explicacao, .downloads, .grupo-publicacoes {
        padding:0 2rem;
      }

      .tab, .tab-fatores {
        width:calc(100% - 4rem);
        margin:0 2rem;
      }
      
      .rodape {
        padding-left: 2rem;
        padding-right: 2rem;
      }
      
      .container{
        max-width: 100%;
      }
      
      .row{
        display: block;
      }

      .left, .right {
        width: 100%;
        padding:0;
      }

      .left h1, .left p {
        max-width: none;
      }

      .figura{
        margin: 1rem auto;
        max-width: 100%;
        min-width: 100%;
      }

      .orientacoes, .subeixo, .subeixo-uma-col {
        column-count: 1;
        column-gap: 0;
      }

      .subeixo, .subeixo-uma-col-titulo {
        margin-top: 1.5rem;
      }

      .subeixo {
        padding: 1.5rem 1.5rem 0.75rem 1.5rem;
        width:calc(100% - 3rem - 2px);
      }

      .subeixo-uma-col {
        padding:  0 1.5rem 0.75rem 1.5rem;
      }

      .subeixo-uma-col-titulo {
        padding:  1.5rem 1.5rem 0rem 1.5rem;
      }

      h1, .subtitulo {
        font-size: 1.75rem;
      }

      h1.titulo-site {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
      }

      .logo {
        width: 300px;
      }

      @keyframes animatebottom {
        from {
          top:-1.5rem;
          opacity:0
        }
        to {
          top:0;
          opacity:1
        }
      }

      .grupo-cards {
        display: block;
      }

      .cards {
        width: auto;
        margin-right:0;
      }

      .icones {
        width: 100px;
      }
      
      #row-relacoes{
        display:block;
      }

      #right-relacoes {
        text-align: center;
        width:100%;
        box-sizing: border-box;
        padding-left:0;
      }

      #left-relacoes {
        padding: 0 2rem;
        box-sizing: border-box;
        width:100%;
      }

      .explicacao p {
        max-width: unset;
      }

      .subfatores:only-child {
        max-width: unset;
        margin-right: 0;
      }

      #figura-relacoes {
        margin-top:0;
      }

      .eixos {
        padding: 1.25rem 2rem 0 2rem;
      }

      .formulario, .mensagens-form {
        padding: 0 2rem;
      }

      .anchor{
        height: 69px; /*same height as header*/
        margin-top: -69px; /*same height as header*/
      }
  
    }

    @media only screen and (max-width: 600px) {

      .grupo-subfatores {
        display: block;
      }

      .subfatores {
          width:100%;
          margin-right:0;
          max-width: unset;
      }

    }

    @media only screen and (max-width: 500px) {

      .grupo-cards-framework {
        display: block;
      }

      .cards-framework {
          width:100%;
          margin-right:0;
          max-width: unset;
      }
    
    }