/* Estilo automático para a página: quem-somos */
header.preto-branco{
    .logo-header.logo-branca{
        display: block;
    }
    .logo-header.logo-preta{
        display: none;
    }

    .nav-link{
        color: #fff;
    }
}

header{
    .icon-branco{
        display: block;
    }
    .icon-preto{
        display: none;
    }
    li{
        list-style-type: none;
    }
    .nav-link.btn-portal{
        color: #fff;
    }
    .separador-mob {
        display: flex;
    }
    .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
        color: #fff;
    }
}

#navegacao-ilustrada {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 555px;
    display: flex;
    align-items: center;
    position: relative;

    .text-cab-ilustrado {
        position: relative;
        z-index: 10;
    }

    h1{
        font-weight: 500;
        font-size: 46px;
        line-height: 100%;
        text-align: center;
        color: #fff;
    }

    h2{
        font-weight: 500;
        color: #fff;
        font-size: 18px;
        line-height: 100%;
        text-align: center;
        vertical-align: middle;
        margin-bottom: 20px;
    }

    .nav-ilustrada {
        display: flex;
        margin: 0;
        padding: 0;
        justify-content: center;

        li{
            list-style-type: none;
            font-weight: 400;
            font-size: 15px;
            color: #fff;
            
            .seta {
                margin-right: 8px;
            }
        }

        .nav-destaque{
            font-weight: 500;
            font-size: 15px;
            text-decoration: underline;
            color: #fff;
        }
    }
}


#menu-sobre {
    padding: 24px;
    background-color: #1D1D1B;
    color: #fff;
    position: relative;
    z-index: 10;
    overflow: hidden;

    .itens-menu-sobre {
        display: flex;
        justify-content: space-between;
        margin: 0;
        padding: 0;

        li {
            list-style-type: none;
            font-weight: 400;
            font-size: 18px;
            line-height: 100%;
            vertical-align: middle;
            transition: 300ms all ease-in-out;
            color: #fff;

            &:hover{
                font-weight: 500;
                text-decoration: underline;
                text-underline-offset: 8px; /* distância da linha */
            }
        }
    }
}


#sobre {
    padding: 70px 0;
    position: relative;

    img {
       margin-right: 10px;
    }
    h3 {
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
    }
    h2 {
        font-weight: 500;
        font-size: 36px;
        margin: 20px 0;
        line-height: 110%;
    }
    p {
        font-weight: 400;
        font-size: 16px;
        color: #575756;
        line-height: 160%;
        text-align: justify;
    }
    iframe{
        width: 100%;
        height: 100%;
    }
}



#numeros-sobre{
    padding: 70px 0;
    background-color: #F8F8F8;
    position: relative;

    .img-sobre{
        width: 100%;
        object-fit: cover;
        height: 593px;
        position: relative;
    }

    .card-num-sobre {
        box-shadow: 4px 4px 6px 0px #0000001A;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        min-height: 187px;
        margin-bottom: 18px;
        position: relative;
        background-color: #fff;
        z-index: 1;

        .valor-num-sobre {
            font-weight: 700;
            font-size: 2rem;
            line-height: 120%;
            margin: 0;
        }
        
        .text-num-sobre {
            font-weight: 400;
            font-size: 16px;
            color: #575756;
            line-height: 120%;
        }
    }

    
}

#numeros-sobre:before {
    background-image: url(../img/efeito-6.png);
    background-size: contain;
    display: inline-block;
    width: 304px;
    height: 290px;
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    background-repeat: no-repeat;
    z-index: 0;
}
#numeros-sobre:after {
    background-image: url(../img/efeito-7.png);
    background-size: contain;
    display: inline-block;
    width: 304px;
    height: 290px;
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    background-repeat: no-repeat;
    z-index: 0;
}

#mis-vis-val {
    padding: 70px 0;
    color: #fff;

    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        letter-spacing: 0%;
        text-align: center;
        min-height: 206px;
    }


    h3{
        font-weight: 500;
        font-size: 28px;
        line-height: 120%;
        margin-bottom: 10px;
    }

    .card-mvv {
        background-color: #1D1D1B;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px;
        margin-bottom: 30px;

        .icon-mis-vis-val {
            margin-bottom: 8px;
        }
    }
}

#participacao{
    background-color: #F7F7F7;
    padding: 70px 0;
    position: relative;

    .img-participacao{
        width: 100%;
        height: 410px;
        object-fit: cover;
    }

    h3{
        font-weight: 500;
        font-size: 36px;
        line-height: 100%;
        color: #1D1D1B;
        margin-bottom: 30px;
    }

    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #575756;
        text-align: justify;
        position: relative;
        z-index: 10;
    }
    
    .selecao-status{
        .nav-pills {
            border-bottom: 1px solid #B7B7B7;
            padding-bottom: 10px;
            display: flex;
            justify-content: center;
        }
        .nav-link {
            font-weight: 400;
            font-size: 16px;
            color: #575756;
            line-height: 100%;
        }
    }

    .swiper-button-next{
        color: #fbfbfb;
    }
    .swiper-button-prev {
        color: #fbfbfb;
    }
}
#participacao:before {
    background-image: url(../img/efeito-6.png);
    background-size: contain;
    display: inline-block;
    width: 304px;
    height: 290px;
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    background-repeat: no-repeat;
    z-index: 0;
}
#participacao:after {
    background-image: url(../img/efeito-7.png);
    background-size: contain;
    display: inline-block;
    width: 304px;
    height: 290px;
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    background-repeat: no-repeat;
    z-index: 0;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    font-weight: 500 !important;
    background-color: transparent !important;
    border-bottom: solid 5px #575756;
    border-radius: 0;
    padding-bottom: 13px;
    margin-bottom: -30px;
    color: #000;
}

#politica{
    padding: 60px 0;
    
    h2{
        font-weight: 500;
        font-style: Medium;
        font-size: 36px;
        line-height: 100%;
        margin-bottom: 30px;

        img{
            margin-right: 8px;
        }
    }
    
    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 160%;
        color: #575756;
        text-align: justify;
    }

    .img-politica{
        width: 100%;
        height: 350px;
        object-fit: cover;
    }
}


#navegacao-ilustrada:before {
    background-image: url(../img/efeito-1.png);
    background-size: cover;
    display: inline-block;
    width: 156px;
    height: 570px;
    content: "";
    position: absolute;
    top: 0px;
    right: 39px;
    background-repeat: no-repeat;
    z-index: 10;
}
#menu-sobre:before {
    background-image: url(../img/efeito-2.png);
    background-size: contain;
    display: inline-block;
    width: 215px;
    height: 484px;
    content: "";
    position: absolute;
    top: 0px;
    right: -20px;
    background-repeat: no-repeat;
}
@media all and (max-width: 1700px) { 
    #navegacao-ilustrada:before {
        display: none;
    }
    #menu-sobre:before {
        display: none;
    }
}





/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-toggler:focus{
       box-shadow: none; 
    }
    header.preto-branco {
        background-color: rgb(29, 29, 27) !important;
    }
    header {
        .social-header {
            padding: 0;

            .separador-mob {
                display: flex;
                justify-content: space-between;

                .d-left {
                    display: flex;
                }
            }
        }
        .navbar-collapse a {
            color: #fff;
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: transparent;
            color: #ffffff;
        }
        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #fff;
        }

        .dropdown-menu li{
            color: #fff;
        }
    }

    #numeros-sobre {
        .img-sobre {
            margin-bottom: 30px;
        }
    }
    #participacao {
        h3 {
            margin-top: 30px;
        }
    }

    #mis-vis-val {

        p{
            min-height: auto;
        }
    }

}

/* MOBILE */
@media all and (max-width: 767px) { 
    .navbar-toggler:focus{
       box-shadow: none; 
    }
    header.preto-branco {
        background-color: rgb(29, 29, 27) !important;
    }
    header {
        .social-header {
            padding: 0;

            .separador-mob {
                display: flex;
                justify-content: space-between;

                .d-left {
                    display: flex;
                }
            }
        }
        .navbar-collapse a {
            color: #fff;
        }

        .dropdown-item.active, .dropdown-item:active {
            background-color: transparent;
            color: #ffffff;
        }
        .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
            color: #fff;
        }

        .dropdown-menu li{
            color: #fff;
        }

    }

    #navegacao-ilustrada {
        height: 570px;
    }
    #menu-sobre {
        .itens-menu-sobre {
            overflow-x: scroll;

            a{
                text-wrap-mode: nowrap;
                padding-bottom: 20px;
                margin-right: 22px;
            }
        }
    }

    #numeros-sobre{
        .img-sobre {
            height: 373px;
            z-index: 10;
            position: relative;
        }
        .card-num-sobre {
            margin-top: 20px;
        }
    }

    #mis-vis-val{
        .card-mvv {
            margin-bottom: 20px;
        }
    }

    #participacao {
    & .selecao-status {
        .nav-pills {
            overflow-x: scroll;
            flex-wrap: nowrap;
            }
        }

        h3 {
            margin-top: 30px;
        }
    
        p {
            z-index: 10;
            position: relative;
        }
    }


}

/* WIDE */
@media (min-width: 1400px) and (max-width: 2600px) {
}


.btn-ler-mais-sobre {
    background-color: transparent;
    border: none;
    font-weight: 700;
}

.btn-ler-mais-sobre:hover {
     font-weight: 800;
}