@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
}

@media (min-width: 1200px) {
  .container{
    max-width: 1140px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (max-width: 1199px) {
  header nav ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-basis: 24%;
  }

  header nav ul li:first-of-type {
    flex-basis: 100%;
    margin: 0 0 5px;
  }

  .parceria-wrapper .parceiro {
    flex-basis: 140px;
  }

  .subtitle {
    font-size: 14px;
    margin-bottom: 20px;
  }




  #junte-se-ao-pacto a:nth-last-child(-n + 2) {
    display: none;
  }

  #perfis .perfis {
    grid-template-columns: 1fr;
    /* grid-template-rows: repeat(14, auto); */
    column-gap: 0;
  }

  #perfis .nav-perfil-wrapper {
    /* order: unset; */
    flex-direction: column;
    margin-bottom: 10px;
  }

  #perfis .perfil-wrapper {
    order: unset;
  }

  #perfis .nav-perfil-wrapper > .title {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: auto;
    height: 40px;
    padding: 0 12px;
    background-position: left center;
    align-items: center;
    text-align: left;
  }

  #perfis .nav-perfil-wrapper:not(.open) > .title {
    height: 80px;
  }

  #perfis .nav-perfil-wrapper > .title > span {
    grid-column: 2;
  }

  #perfis .nav-perfil-wrapper-content {
    font-size: 14px;
    max-height: 0;
    max-width: unset;
    padding-block: 0;
  }

  #perfis .nav-perfil-wrapper-content > div {
    width: auto;
  }

  .intro-text,
  .end-text {
    position: relative;
    grid-template-columns: auto;
    padding-inline: 0;
    margin-top: 22px;
  }

  .intro-text::before {
    display: none;
  }

  .page-quem-somos .intro-text::before {
    position: absolute;
    top: 30px;
    display: block;
    width: 60px;
    height: calc(100vw - 40px);
    transform-origin: left top;
    transform: rotate(-90deg) translate(-50%, 0%);
  }

  .page-quem-somos .end-text::after {
    position: absolute;
    bottom: -30px;
    display: block;
    width: 60px;
    height: calc(100vw - 40px);
    transform-origin: left bottom;
    transform: rotate(90deg) translate(-50%, 0%);
  }

  .intro-text .section-title,
  .end-text .section-title {
    margin-block: 0 16px;
  }

  .intro-text .section-title,
  .end-text .section-title,
  .intro-text .text {
    padding: 0;
  }

  .page-quem-somos .intro-text .text,
  .page-quem-somos .end-text .text {
    min-height: auto;
    padding: 0;
  }

  .page-quem-somos .intro-text,
  .page-quem-somos .end-text {
    margin-top: 0;
    padding-top: 80px;
  }

  .section-title {
    font-size: 16px;
  }

  h2.section-title {
    margin-block: 20px 5px;
  }

  .left.section-title {
    font-size: 24px;
  }

  .meta .section-title {
    font-size: 44px;
    margin-block: 0 32px;
  }

  .intro-text .text,
  .end-text .text {
    font-size: 14px;
  }

  #perfis {
    padding-block: 20px;
  }

  #perfis .nav-perfil-wrapper-content .title {
    font-size: 16px;
  }


  #perfis .nav-perfil-wrapper-content .content + .title {
    margin-top: 16px;
  }

  #perfis .perfil-wrapper .jornada {
    margin-top: 0;
    padding: 32px 0;
    margin-inline: -50vw;
    margin-bottom: 20px;
    height: 380px;
  }

  #perfis .perfil-wrapper .jornada.jovem {
    height: 540px;
  }

  #perfis .perfil-wrapper .jornada .title {
    font-size: 16px;
  }

  #perfis .perfil-wrapper .jornada .jornada-steps {
    margin-block: 16px;
    gap: 5px;
  }

  #perfis .perfil-wrapper .jornada .jornada-steps .step {
    padding: 15px 0px 15px 26px;
    white-space: nowrap;
  }

  #perfis .perfil-wrapper .jornada .jornada-steps .step:first-of-type {
    padding: 15px 0px 15px 12px;
  }

  #perfis .perfil-wrapper .jornada .jornada-steps .step div:first-of-type {
    font-size: 12px;
  }

  #perfis .perfil-wrapper .jornada .jornada-steps .step div:last-of-type {
    display: none;
  }

  #perfis .perfil-wrapper .jornada .step-content {
    flex-direction: column;
    gap: 24px;
    height: auto;
  }

  #perfis .perfil-wrapper .jornada .step-content .image {
    height: 80px;
  }

  #perfis .perfil-wrapper .jornada .step-content .content {
    font-size: 14px;
    text-align: center;
  }

  #perfis .perfil-wrapper .jornada .step-content .content .btn {
    font-size: 14px;
    margin-inline: auto;
  }

  #perfis .perfil-wrapper .jornada .substep-nav {
    font-size: 14px;
    padding: 16px;
    text-align: center;
  }

  .banner .video-wrapper {
    padding-bottom: 58.2%;
  }

  .banner .video-wrapper iframe {
    width: 104%;
    height: 100%;
  }

  h2 {
    font-size: 30px;
    margin-block: 0 24px;
  }

  #um-chamado-para-a-acao .container {
    font-size: 14px;
    padding-bottom: 24px;
  }

  #uma-iniciativa-das-empresas,
  #comite-gestor {
    border-bottom: 1px solid var(--cl-dark-blue);
  }

  .parceria-wrapper {
    gap: 20px;
    padding-block: 5px;
  }

  .onemio-wrapper,
  .blue-wrapper,
  .banner-biblioteca,
  .quem-somos-wrapper {
    flex-direction: column;
    margin-block: 22px;
    gap: 20px;
  }

  .onemio-wrapper .video-wrapper,
  .quem-somos-wrapper .video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.5%;
    height: 0;
    border-radius: 32px;
    overflow: hidden;
  }

  .onemio-wrapper .video-wrapper iframe,
  .quem-somos-wrapper .video-wrapper iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border: 0;
  }

  .onemio-wrapper .content,
  .quem-somos-wrapper .content,
  .adesao-wrapper {
    font-size: 14px;
    order: -1;
    gap: 20px;
  }

  .quem-somos-wrapper .content {
    order: 1;
  }

  .btn-blue,
  .btn-biblioteca {
    font-size: 14px;
    margin-inline: auto;
    padding: 15px 25px;
  }

  .btn-biblioteca img {
    width: 1.5em;
    height: 1.5em;
  }

  .blue-wrapper {
    position: relative;
  }

  .banner-biblioteca,
  .blue-wrapper:first-child {
    margin-top: 0;
  }

  .blue-wrapper:not(.banner-adesao) .image {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.15;
  }

  .banner-biblioteca .image,
  .blue-wrapper.banner-adesao .image {
    border-radius: 0;
    width: 100%;
    height: 266px;
    order: -1;
  }

  .banner-biblioteca .content,
  .blue-wrapper .content,
  .meta {
    font-size: 16px;
    padding: 32px 20px;
    margin: 0;
    text-align: center;
    z-index: 1;
  }

  .banner-adesao .image + .content {
    padding-top: 0;
  }

  .banner-adesao a {
    text-align: center;
    margin-bottom: 0;
  }

  .banner-adesao .content {
    text-align: left;
  }

  .banner-biblioteca .content {
    font-size: 22px;
    width: auto;
    max-width: max-content;
    margin: 0;
    padding: 0 20px 32px;
  }

  .destaques-home {
    margin: 20px;
  }

  .btn-nav-swiper {
    font-size: 75px;
  }

  .btn-nav-swiper.button-prev {
    left: -55px;
  }

  .btn-nav-swiper.button-next {
    right: -55px;
  }

  footer {
    font-size: 14px;
  }

  .footer-wrapper {
    flex-direction: column;
  }

  .footer-wrapper > div > img {
    width: 200px;
  }

  .footer-menu {
    display: none;
  }

  header {
    position: sticky;
    top: 0;
    padding-block: 20px;
    width: calc(100% - 96px);
    height: 96px;
    z-index: 9000;
    box-shadow: 3px 3px 3px #0002;
  }

  header .brand-area {
    position: relative;
    display: grid;
    grid-template-columns: 2fr auto;
    gap: 0;
    justify-content: space-between;
  }

  header .logo img {
    height: 50px;
  }

  .topnav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 100vw;
    width: var(--mobile-menu-width);
    padding-block: 20px;
    z-index: 9003;
    transition: var(--transition);
  }

  .topnav ul {
    flex-direction: column;
    padding-top: 76px;
    padding-right: 76px;
  }

  .topnav ul li {
    text-align: right;
  }

  .overlay {
    position: fixed;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    z-index: 9002;
    transition: var(--transition);
  }

  .navbar-toggler {
    position: fixed;
    width: max-content;
    top: 20px;
    left: calc(100% - 76px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cl-toggler-closed);
    padding-block: calc(var(--navicon-height) * 6.5);
    padding-inline: calc(var(--navicon-height) * 4);
    user-select: none;
    cursor: pointer;
    z-index: 9004;
    transition: var(--transition);
  }

  .navbar-toggler::before,
  .navbar-toggler::after {
    position: absolute;
    content: "";
    display: block;
    transition: var(--transition);
    z-index: -9004;
  }

  .navbar-toggler::before {
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    background-color: var(--cl-white);
    box-shadow: 3px 3px 3px #0002;
  }

  .navbar-toggler::after {
    width: 100%;
    height: 100%;
    background-color: var(--cl-toggler-closed);
  }

  #navbar-toggle-check:checked ~ .navbar-toggler::before,
  #navbar-toggle-check:checked ~ .navbar-toggler::after {
    background-color: var(--cl-toggler-open);
    box-shadow: none;
  }

  .navbar-toggler .navicon {
    position: relative;
    display: block;
    width: calc(var(--navicon-height) * 6);
    height: var(--navicon-height);
    background: var(--cl-navicon-closed);
    border-radius: var(--navicon-height);
    transition: var(--transition);
    z-index: 1;
  }

  .navbar-toggler .navicon::before,
  .navbar-toggler .navicon::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background-color: var(--cl-navicon-closed);
    border-radius: var(--navicon-height);
    transition: var(--transition);
  }

  .navbar-toggler .navicon::before {
    top: calc(var(--navicon-height) * -2);
  }

  .navbar-toggler .navicon::after {
    top: calc(var(--navicon-height) * 2);
  }

  #navbar-toggle-check:checked ~ .navbar-toggler {
    background-color: var(--cl-toggler-open);
  }

  #navbar-toggle-check:checked ~ .navbar-toggler .navicon {
    background: transparent;
  }

  #navbar-toggle-check:checked ~ .navbar-toggler .navicon::before,
  #navbar-toggle-check:checked ~ .navbar-toggler .navicon::after {
    top: 0;
    background-color: var(--cl-dark-blue);
  }

  #navbar-toggle-check:checked ~ .navbar-toggler .navicon::before {
    transform: rotate(45deg);
  }

  #navbar-toggle-check:checked ~ .navbar-toggler .navicon::after {
    transform: rotate(-45deg);
  }

  #navbar-toggle-check:checked ~ .topnav {
    left: calc(100vw - var(--mobile-menu-width));
    box-shadow: 0px 12px 10px 2px rgba(0, 0, 0, 0.15);
  }

  #navbar-toggle-check:checked ~ .overlay {
    opacity: 1;
    visibility: visible;
  }

  .banner-adesao .title,
  .banner-biblioteca .title {
    font-size: 30px;
    text-align: center;
  }

  .page-biblioteca #uma-iniciativa-das-empresas {
    margin-bottom: 32px;
  }

  .biblioteca-profiles-wrapper {
    gap: 5px;
  }

  .biblioteca-profile {
    font-size: 10px;
    padding: 5px 10px;
  }

  .swiper-biblioteca {
    margin-block: 32px;
  }

  .swiper-biblioteca .swiper-slide {
    display: block;
  }

  .page-biblioteca .card-biblioteca {
    height: 400px;
  }

  .acc-wrapper {
    padding-inline: 20px;
    margin-block: 20px;
  }

  .flex-col-wrapper {
    flex-direction: column;
    margin-inline: -20px;
  }

  .flex-col {
    border-right: none;
    border-bottom: 5px solid var(--cl-dark-blue);
  }

  .acc-title.container,
  .fauxacc-title.container {
    font-size: 16px;
    padding: 22px 15px 22px 20px;
  }

  .quem-somos-infografico {
    padding-block: 32px;
  }

  .quem-somos-infografico::before,
  .quem-somos-infografico::after {
    display: none;
  }

  .quem-somos-infografico .text {
    max-width: unset;
    font-size: 16px;
  }

  .infografico-wrapper {
    font-size: 16px;
    margin-top: 32px;
  }

  .infografico-wrapper .level {
    font-size: 14px;
    padding: 10px 25px;
    margin-bottom: 75px;
    border-radius: 40px;
  }

  .infografico-wrapper .level-2-wrapper {
    width: auto;
  }

  .infografico-wrapper .level-2 {
    width: 85%;
    margin-bottom: 32px;
  }

  .infografico-wrapper .level-2-wrapper::before {
    bottom: calc(100% + 40px);
  }

  .infografico-wrapper .level-2::before {
    height: 27px;
    bottom: calc(100% + 15px);
  }

  .infografico-wrapper .level-2::after {
    font-size: 40px;
    bottom: 110%;
  }

  .infografico-wrapper .level-3 {
    padding-block: 20px;
    margin-bottom: 0;
  }

  .infografico-wrapper .level-title {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .infografico-wrapper .level-cols {
    flex-direction: column;
    gap: 10px;
  }

  .infografico-wrapper .level-col {
    margin-bottom: 0;
  }

  .infografico-wrapper .level-col::before {
    width: 4px;
    height: 12px;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .infografico-wrapper .level-hover {
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 320px;
    box-shadow: 0px 0px 100px #000;
  }

  .infografico-wrapper .level-hover::before {
    display: none;
  }

  .acc-content {
    font-size: 14px;
    padding: 20px 0;
  }
}