@media (max-device-width: 480px) {
    .br {
        display: block;
    }

    .barra-menu .hamburguer {
        display: block;
        cursor: pointer;
        float: right;
        padding: 40px 20px;
    }
    
    .barra-menu .hamburguer .linha {
        background-color: #333333;
        display: block;
        height: 2px;
        position: relative;
        width: 24px;
    }
    
    .barra-menu .hamburguer .linha::before, .barra-menu .hamburguer .linha::after {
        background-color: #333333;
        content: '';
        display: block;
        height: 100%;
        position: absolute;
        transition: all .2s ease-out;
        width: 100%;
    }
    
    .barra-menu .hamburguer .linha::before {
        top: 5px;
    }
    
    .barra-menu .hamburguer .linha::after {
        top: -5px;
    }

    /* .barra-menu .menu-lateral:checked ~ .barra-menu .menu-mobile {
        display: block;
    } */

    .barra-menu .menu-lateral:checked + label .linha {
        background: transparent;
    }

    .barra-menu .menu-lateral:checked + label .linha::before {
        transform: rotate(-45deg);
        top: 0;
    }

    .barra-menu .menu-lateral:checked + label .linha::after {
        transform: rotate(45deg);
        top: 0;
    }

    .barra-menu .menu-lateral {
        display: none;
    }

    .barra-menu .logo {
        flex-direction: column;
    }

    .barra-menu .logo .logo-azul {
        padding-right: 0;
        border-right: none;
        padding-left: 30px;
    }

    .barra-menu .logo .logo-verde {
        padding-left: 30px;
    }

    .barra-menu .menu {
        display: none;
    }

    .barra-menu .menu-mobile {
        margin: 0 auto;;
    }

    .barra-menu .menu-mobile ul {
        margin: 0px auto;
        list-style-type: none;
    }
    
    .barra-menu .menu-mobile ul li {
        margin: 3px 7px;
        text-align: center;
        font-size: 24px;
        vertical-align: middle;
    }

    .banner {
        background-image: linear-gradient(to right, #f7f7ef, #eef8ef, #eef8ef, #dfefef, #d7f0ef, #c7e8e8);
    }

    .banner .chamada {
        max-width: auto;
        padding: 0px 0px 50px 0px;
        text-align: center;
        position: relative;
    }
    
    .banner .chamada .titulo {
        font-size: 28pt;
    }

    .banner .chamada .subtitulo {
        font-size: 18pt;
        margin-top: 20px;
    }

    .banner .chamada p {
        text-align: center;
        margin-top: -10px;
        margin-bottom: 0px;
        padding: 30px;
    }

    .banner>figure {
        display: none;
    }

    .logos {
        width: auto;
        top: 0;
        padding: 25px 25px 10px;
    }

    .logos>figure>img {
        height: auto;
    }

    .logos figure:nth-of-type(2) img {
        width: auto;
        display: block;
    }

    .objetivos {
        margin-top: 50px;
        margin-bottom: 20px;
    }

    .objetivos p, .objetivos ul li .descricao-objetivos, .como-participar>.conteudo>p {
        padding: 0 30px;
        text-align: justify;
    }

    .objetivos ul li {
        margin-bottom: 20px;
    }

    .membros {
        height: auto;
    }

    .como-participar .texto-web {
        display: none;
    }
    
    .como-participar .texto-mobile {
        display: block;
    }

    .como-participar ul li .passo-1 {
        height: 190px;
    }

    .como-participar ul li .passo-1 .texto {
        top: -140px;
    }

    .como-participar ul li .passo-2 {
        height: 170px;
        margin-top: 0;
    }
    
    .como-participar ul li .passo-2 .texto {
        top: -140px;
    }
    
    .como-participar ul li .passo-3 {
        height: 170px;
        margin-top: -15px;
    }
    
    .como-participar ul li .passo-3 .texto {
        top: -140px;
    }
    
    .como-participar ul li .passo-4 {
        height: 125px;
    }

    .como-participar ul li .passo-4 picture img {
        height: 105px;
    }
    
    .como-participar ul li .passo-4 .texto {
        top: -107px;
    }

    .como-participar picture img {
        max-width: none;
        width: 100%;
        border-radius: 30px;
        height: 145px;
    }

    .como-participar ul li:last-child {
        display: none;
    }

    .ods {
        padding: 0 5px;
    }

    .objetivos ul, .membros ul, .como-participar ul, .rodape .mapa .conteudo, .rodape .mapa ul {
        flex-direction: column;
    }

    .rodape, .rodape p, .rodape a, .rodape a:active, .rodape a:visited {
        width: 100%;
        height: auto;
    }

    .rodape .mapa, .rodape .mapa .menu, .rodape .mapa .redessociais {
        padding: 20px 0;
    }

    .rodape .mapa ul {
        text-align: center;
    }

    .rodape .mapa ul li {
        margin: 3px 15px;
    }

    .rodape .mapa ul li figure {
        margin: 0 auto;
    }

    .rodape .mapa .redessociais {
        justify-content: center;
    }
 
    .rodape .logo {
        flex-wrap: wrap;
    }

    .rodape .logo div {
        width: 100%;
    }

    .rodape .logo .logo-cnm {
        margin-left: 0;
    }

    .rodape .logo div figure {
        display: flex;
        justify-content: center;
    }

    .rodape .logo div {
        width: 100%;
    }

    .rodape .redessociais a {
        margin-left: 10px;
        width: 35px;
        height: 35px;
    }

    .rodape-fixed {
        position: relative;
        bottom: 0;
    }

    .pagina {
        padding: 0 30px;
        margin-top: 0;
    }

    .pagina .conteudo h2.titulo {
        font-size: 25px;
    }

    .pagina .oprojeto {
        flex-direction: column;
    }

    .pagina .oprojeto .informacoes {
        margin-left: 0;
    }

    .informacoes .duvidas {
        padding: 10px;
    }

    .pagina .contato {
        width: auto;
        margin: 50px auto;
    }
}

@media (min-device-width: 481px) and (max-device-width: 768px) {
    .barra-menu .conteudo {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .barra-menu .menu {
        display: block;
    }

    .barra-menu .menu-mobile {
        display: none;
        transition: opacity 1s ease-out;
        opacity: 0;
    }

    .logos {
        width: auto;
        flex-direction: column;
    }

    .objetivos ul li {
        margin-bottom: 20px;
    }

    .membros {
        height: auto;
    }

    .objetivos ul, .membros ul, .como-participar ul, .rodape .mapa .conteudo, .rodape .mapa ul {
        flex-direction: column;
    }
    .politica {
        width: 100%;               
    }
    .box-img-popup{
        width: 80%;   
    } 
    .banner-prorrogacao{
          
    }

}