/* Estilo automático para a página: blog */
header{
    background-color: var(--preto) !important;
    
    .btn-padrao::before {
        background: var(--cinza) !important; 
    }
}


#blog{
    padding: 170px 0 88px !important;
    position: relative;

    .nav-pills {
        display: flex;
        justify-content: center;
        border-bottom: solid 1px var(--cinza);
        padding-bottom: 8px;

        .nav-item {
            margin: 0 16px -4px 16px;
        }

        .nav-link {
            color: var(--preto);
            text-align: center;
            font-size: 20px;
            font-weight: 500;
            letter-spacing: -0.04px;

        }
        .active{
            color: var(--vermelho);
            font-weight: 600;
            background-color: transparent;
            position: relative;

            &::after{
                background-color: var(--vermelho);
                background-size: auto;
                display: inline-block;
                width: 100%;
                height: 8px;
                content: "";
                top: 46px;
                left: 0;
                position: absolute;
                z-index: 0;
                border-radius: 25px;
            }
        }
    }

}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {
    #blog {
        .nav-pills {
            justify-content: space-evenly;
            
            .nav-link {
                margin-bottom: 20px;
            }
        }
    }
}

/* MOBILE */
@media all and (max-width: 767px) { 
    #blog {
        .nav-pills {
            flex-direction: row;
            flex-wrap: nowrap;
            overflow: scroll;
        }
    }
}