.black{
    color: #000000;
}

/* Banner principal */
#banner-principal{
    background: #e2e3e7;
    height: 350px;
    position: relative;
    overflow: hidden;
}
#banner-principal .row{
    height: 350px;
}
#banner-principal h4{
    font-family: 'robotolight';
}
#banner-principal .logo-banner{
    width: 300px;
}
#banner-principal .bg-banner{
    position: absolute;
    min-height: 100%;
    max-width: none;
    min-width: 100%;
    left: -17%;
}



/* Serviços online */
#servicos-online{
    background: #034ea2;
    padding: 25px 0 45px;
}
#servicos-online .card{
    border-radius: 15px !important;
    margin: 15px 0;
}
#servicos-online .card-body{
    padding: 1rem;
}
#servicos-online .card-title,
#servicos-online .card-subtitle{
    color: #034ea2;
}
#servicos-online .card-subtitle{
    font-weight: 400;
    font-size: 100%;
    height: 40px;
    text-transform: uppercase;
}
#servicos-online .card p{
    font-family: 'robotolight';
    height: 75px;
    line-height: normal;
}

#servicos-online .slide-serv-online{
    opacity: 0;
    transition: all 300ms ease-out;
}

#servicos-online .slide-serv-online.show{
    opacity: 1;
}
#servicos-online .slide-serv-online .slick-slide {
    margin: 0 25px;
}
#servicos-online .slide-serv-online .slick-arrow{
    z-index: 2;
}
#servicos-online .slide-serv-online .slick-prev{
    left: -5px !important;
}
#servicos-online .slide-serv-online .slick-next{
    right: -5px !important;
}
#servicos-online .list-mais-acessados .list-group-item{
    background: none;
    border-color: rgba(255, 255, 255, .25);
    padding-left: 0;
}
#servicos-online .list-mais-acessados .list-group-item:first-child{
    border-top: 0;
    padding-top: 0;
}
#servicos-online .list-mais-acessados .list-group-item a{
    color: #ffffff;
}
#servicos-online .list-mais-acessados .list-group-item a:hover{
    text-decoration: underline;
}

@media (max-width: 791px){
    .slide-serv-online .card-body{
        height: 110px !important;

    }
    .slide-serv-online .card-body h5{
        font-size: 1rem;
        
    }
}

@media (max-width: 425px){
    .slide-serv-online .card-body{
        height: 110px !important;

    }
        .slide-serv-online .card-body h5{
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Terminais de atendimento */
#terminais-atendimento .bg-terminais{
    background: url(../images/locais-atendimento/bg-home.jpg) no-repeat center;
    background-size: cover;
}
#terminais-atendimento .content-terminais{
    padding: 50px;
}


/* Notícias */
#noticias-home{
    background: #898989;
    padding: 45px 0;
}
#noticias-home.novo-visual{
    background: linear-gradient(90deg, #898989 57%, #ffffff 43%) !important;
}
#noticias-home .card{
    border-radius: 15px !important;
    overflow: hidden;
    min-height: 390px;
}
#noticias-home .card-title{
    color: #034ea2;
    font-weight: 400;
    height: 75px;
}
#noticias-home .card p{
    font-family: 'robotolight';
    height: 50px;
}
#noticias-home .slide-noticias .slick-slide {
    margin: 0 25px;
}
#noticias-home .slide-snoticias .slick-list {
    margin: 0 -25px;
}
#noticias-home .slide-snoticias .slick-arrow{
    z-index: 2;
}



/* Redes sociais e avisos importantes */
#redes-avisos{
    background: linear-gradient(90deg, #f7f7f7 50%, #034ea2 50%);
    padding: 45px 0;
}
#redes-avisos.novo-visual{
    background: #034ea2 !important;
}
#redes-avisos .redes-home{
    padding-right: 45px;
}
#redes-avisos .avisos-home{
    padding-left: 45px;
}
#redes-avisos .videos-home{
    margin-top: 45px;
}
#redes-avisos .videos-home .thumb{
    position: relative;
}
#redes-avisos .videos-home .thumb img{
    min-width: 100%;
}
#redes-avisos .videos-home .thumb:after{
    content: "";
    background: url(../images/icones/play-home.png) no-repeat center;
    background-size: cover;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 50%;
    margin-left: -25px;
}
#redes-avisos .videos-home h5{
    margin-top: 10px;
}


@media (max-width: 575.9px){
    #redes-avisos{
        background: #f7f7f7;
        padding-bottom: 0;
    }
    .avisos-home{
        background: #034ea2;
    }

    #redes-avisos .redes-home, .avisos-home{
        padding: 40px 16px !important;
    }
    
}


@media (max-width: 574.99px){
}

.card-avisos{
    background: #f7f7f7;
    border-radius: 15px;
    margin-bottom: 10px;
}
.card-avisos .card-body{
    padding: .6rem .8rem;
}
.card-avisos p.data{
    font-size: 1.2rem;
    font-family: 'robotolight';
    line-height: normal;
}
.card-avisos p.data > strong{
    font-family: 'robotobold';
}

@media (max-width: 1023px){
    .redes_sociais_icons_home img{
        width: 50px;

    }
}


@media (max-width: 574px){
    .redes_sociais_icons_home img{
        width: 50px;

    }
}

@media (max-width: 320px){
    .redes_sociais_icons_home img{
        width: 40px;

    }
}


/* Videos tutoriais */
#videos-tutoriais{
    padding: 50px 0;
}

#videos-tutoriais .slick-prev:before, 
#videos-tutoriais .slick-next:before{
    color:#034ea2;
}

#videos-tutoriais .thumb-video img{
    width:100%;
    height:100%;
    object-fit:cover;
}

#videos-tutoriais .thumb-video{
    color:white;
    text-align:center;
    position: relative;
    overflow:hidden;
    /*height:180px;*/
}
#grid-videos .grid-videos a{
    cursor: pointer;
    outline: 15px solid white;
}

#grid-videos .slick-track{
    padding:0 5px;
}
/*
#grid-videos .thumb-video:before{
    content:"";
    background-color:rgba(0,0,0,0.5);
    display:block;
    position:absolute;
    width:100%;
    height:100%;
}*/

#videos-tutoriais .thumb-video h3{
    position: absolute;
    bottom: 0;
    font-size:1.2rem;
    width:100%;
    padding:10px;
}


#videos-tutoriais .thumb-video .mask{
    position: absolute;
    color: aliceblue;
    padding:10px 0;
    text-transform: uppercase;
    width: 100%;
    height: 100%;
    bottom: 0;
}

#videos-tutoriais .thumb-video .mask:before{
    content: "";
    background: url(../images/icones/play-home.png) no-repeat center;
    background-size: cover;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -30px;
    left: 50%;
    margin-left: -25px;
}

/* Cartilhas */
#cartilhas-home{
    background: #f3f7f9;
    padding: 25px 0 0;
}
#cartilhas-home h2{
    font-size: 3.2rem;
    font-weight: bold;
    line-height: 3.2rem;
    margin: 50px 0 25px;
}
#cartilhas-home h5{
    font-size: 1.6rem;
    line-height: normal;
    margin-bottom: 25px;
}

@media (max-width: 1200px) and (min-width: 991px) {
    #cartilhas-home h2{
        font-size: 2.6rem;
        line-height: 2.6rem;
        margin: 25px 0 15px;
    }
    #cartilhas-home h5{
        font-size: 1.2rem;
        line-height: normal;
        margin-bottom: 15px;
    }
}

@media (max-width: 990px) and (min-width: 768px) {
    #cartilhas-home h2{
        font-size: 2.4rem;
        line-height: 2.4rem;
        margin: 15px 0;
    }
    #cartilhas-home h5{
        font-size: 1.1rem;
        line-height: normal;
        margin-bottom: 10px;
    }
}

@media (max-width: 767px) {
    #cartilhas-home img{
        float: right;
        max-width: 65%;
        margin-top: -40px;
    }
}

@media (max-width: 380px) {
    #cartilhas-home h2{
        font-size: 2.4rem;
        line-height: 2.4rem;
    }
    #cartilhas-home h5{
        font-size: 1.4rem;
        line-height: 1.8rem;
    }
    #cartilhas-home img{
        max-width: 60%;
    }
}



#banner-ppt-digital {
    background: url(../images/banner_destaque/ppt-bolso/bg-190.jpg) no-repeat center;
    background-size: cover !important;
    overflow: hidden;
    position: relative;
}

@media (min-width: 1740px) {
    #banner-ppt-digital {
        background-size: cover;
    }
}

@media (max-width: 767px) {
    #banner-ppt-digital {
        background-position: right;
    }
}



#banner-ppt-digital .footer-banner {
    background: rgba(255, 255, 255, .8);
    position: absolute;
    bottom: 0;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}



#banner-ppt-digital .footer-banner .container {
    position: relative;
}



#banner-ppt-digital .footer-banner .qr-code {
    position: absolute;
    right: 0;
    bottom: 10px;
}

/************** RESPONSIVO TEMA *************/
@media (max-width: 420px) {
    #servicos-online .slide-serv-online a{
        font-size: 0.8em;
        padding: 10px 5px;
    }
    #servicos-online {
        background:#034ea2;
    }
}
@media (max-width: 575.98px) {
    #servicos-online .slide-serv-online .slick-slide{
        margin: 0;
    }
    #servicos-online .slide-serv-online .slick-slide .card{
        width: 80%;
        margin: auto;
    }
    #servicos-online .slide-serv-online .slick-slide .card-body{
        padding: 1rem;
    }
    #terminais-atendimento .bg-terminais{
        height: 150px;
    }
    .slick-next{
        right: -10px;
    }
    .slick-prev{
        left: -10px;
    }
}

@media (max-width: 767.98px) {
    #banner-principal{
        height: 130px;
    }
    #banner-principal .bg-banner{
        height: 100%;
    }
    #noticias-home .card{
        min-height: none;
    }
    #redes-avisos{
        background: linear-gradient(180deg, #f7f7f7 50%, #034ea2 50%);
    }
    #redes-avisos .redes-home .list-inline-item:not(:last-child){
        margin: 0;
    }
    #noticias-home .card-title,
    #noticias-home .card p{
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    #banner-principal,
    #banner-principal .row{
        height: 200px;
    }
    #banner-principal .logo-banner{
        width: 170px;
    }
    #banner-principal .bg-banner{
        left: -24%;
        height: 100%;
    }
    #noticias-home .card{
        min-height: 350px;
    }
    #noticias-home .card p{
        height: 75px;
    }

    #redes-avisos{
        background: linear-gradient(180deg, #f7f7f7 54%, #034ea2 46%);
    }
    #redes-avisos .redes_sociais_icons_home{
        margin-bottom: 70px;
    }
    #redes-avisos .redes-home .list-inline-item:not(:last-child){
        margin: 0;
    }
    #banner-ppt-digital .footer-banner{
        text-align: right;
        padding: 5px 0;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    #banner-principal,
    #banner-principal .row{
        height: 300px;
    }
    #banner-principal .logo-banner{
        width: 200px;
    }
    #banner-principal .bg-banner{
        left: -35%;
        height: 100%;
    }
    #redes-avisos .redes-home .list-inline-item:not(:last-child){
        margin: 0;
    }
}

@media (min-width: 1200px) and (max-width: 1400px){
    #banner-principal .bg-banner{
        left: -32%;
    }
}