@font-face {
    font-family: 'Flama-Bold';
    src: url('../fonts/Flama-Bold.eot');
    src: local('☺'), url('../fonts/Flama-Bold.woff') format('woff'), url('../fonts/Flama-Bold.ttf') format('truetype'), url('../fonts/Flama-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama-Medium';
    src: url('../fonts/Flama-Medium.eot');
    src: local('☺'), url('../fonts/Flama-Medium.woff') format('woff'), url('../fonts/Flama-Medium.ttf') format('truetype'), url('../fonts/Flama-Medium.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Flama-Book';
    src: url('../fonts/Flama-Book.eot');
    src: local('☺'), url('../fonts/Flama-Book.woff') format('woff'), url('../fonts/Flama-Book.ttf') format('truetype'), url('../fonts/Flama-Book.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.agencialp, .segurancalp, .canaislp, .papellp, .internetlp, .produtoslp {
    display: none;
}

.vocebanco {
    color: #6d6e71;
    font-size: 16px;
    font-family: 'Flama-Book';
    background: url('../img/vocebanco/bg_icones.jpg') no-repeat top center;
}

    .vocebanco .cicle {
        border: 3px solid #FFF;
        border-radius: 50%;
        width: 160px;
        height: 160px;
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .vocebanco .cicle span {
            color: #FFF;
            font-family: 'Flama-Bold';
            font-size: 18px;
            margin-top: 50px;
            display: block;
            text-align: center;
        }

    .vocebanco .bg-menu {
        background: url('../img/vocebanco/bg_menu.png') no-repeat center;
        height: 720px;
    }

    .vocebanco .bg-verde {
        background-color: #40ae49;
    }

    .vocebanco .bg-laranja {
        background-color: #fd4f00;
    }

    .vocebanco .bg-laranja-claro {
        background-color: #d88228;
    }

    .vocebanco .bg-azul {
        background-color: #00aeef;
    }

    .vocebanco .bg-marrom {
        background-color: #a37c20;
    }

    .vocebanco .bg-vermelho {
        background-color: #d2232a;
    }




    .vocebanco .link {
        cursor: pointer;
        width: 150px;
        display: inline-block;
        vertical-align: top;
    }

        .vocebanco .submenu {
        cursor: pointer;
        width: 150px;
        display: inline-block;
        vertical-align: top;
    }

    .vocebanco .menu {
        position: absolute;
        right: 0;
        margin-right: 90px;
        /*margin-top: -24px;*/
    }

        .vocebanco .menu li {
            list-style: inherit;
            display: inline;
            margin-left: 0 !important;
        }

            .vocebanco .menu li a {
                width: auto !important;
                text-decoration: none;
            }

    .vocebanco .margin-left-50 {
        margin-left: 50px;
    }

    .vocebanco .margin-top-10 {
        margin-top: 10px;
    }

    .vocebanco .margin-top-20 {
        margin-top: 20px;
    }

    .vocebanco .margin-top-60 {
        margin-top: 60px;
    }

    .vocebanco .margin-top-100 {
        margin-top: 100px;
    }

    .vocebanco .margin-bottom-5 {
        margin-bottom: 5px;
    }

    .vocebanco .margin-bottom-15 {
        margin-bottom: 15px;
    }

    .vocebanco .margin-bottom-30 {
        margin-bottom: 30px;
    }

    .vocebanco .margin-bottom-50 {
        margin-bottom: 50px;
    }

    .vocebanco .margin-bottom-60 {
        margin-bottom: 60px;
    }



    .vocebanco h4 {
        font-size: 18px;
        font-weight: normal;
        margin: 0;
        padding: 0;
    }

    .vocebanco h3 {
        font-size: 24px;
        font-family: 'Flama-Bold';
        text-transform: uppercase;
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
        margin-top: 15px;
        margin-bottom: 25px;
    }

    .vocebanco .img-left {
        float: left;
        margin-right: 10px;
    }

    .vocebanco a {
        text-decoration: underline;
    }

    .vocebanco .content-heading h5 {
        color: #6d6e71;
        font-size: 24px;
        font-family: 'Flama-Medium';
        margin-top: 0 !important;
    }

    .vocebanco p {
        color: #6d6e71;
        font-size: 14px;
        font-family: 'Flama-Book';
    }

    .vocebanco ul li {
        color: #6d6e71;
        font-size: 14px;
        font-family: 'Flama-Book';
        list-style: circle;
        margin-left: 12px;
    }

    .vocebanco div.bar-vb {
        clear: both;
        height: 1px;
    }

    .vocebanco div.bar-chevron-down-vb {
        width: 100%;
        height: 19px;
    }

    .vocebanco div.bar-chevron-down-vb-dest {
        width: 100%;
        height: 82px;
    }

        .vocebanco div.bar-chevron-down-vb-dest h3 {
            font-size: 24px;
            font-family: 'Flama-Bold';
            text-transform: uppercase;
            margin: 0;
            padding: 10px;
            text-align: center;
            color: #FFF;
        }

    .vocebanco .menuPrincipalPapel {
        position: absolute;
        top: 20px;
        left: 50%;
        margin-left: -80px;
    }

    .vocebanco .menuPrincipalAgencias {
        position: absolute;
        top: 180px;
        left: 50%;
        margin-left: 150px;
    }

    .vocebanco .menuPrincipalProdutos {
        position: absolute;
        top: 430px;
        left: 50%;
        margin-left: 150px;
    }

    .vocebanco .menuPrincipalCanais {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -80px;
    }

    .vocebanco .menuPrincipalInternet {
        position: absolute;
        top: 430px;
        left: 50%;
        margin-left: -320px;
    }

    .vocebanco .menuPrincipalSeguranca {
        position: absolute;
        top: 180px;
        left: 50%;
        margin-left: -320px;
    }


.papel h4 {
    color: #fd4f00;
}

.papel h3 {
    color: #fd4f00;
}

.papel a {
    color: #fd4f00;
}

.papel div.bar-vb {
    border-bottom: solid 1px #fd4f00;
}

.papel div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo.png') no-repeat;
    background-position: center;
}

.papel div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_laranja.png') no-repeat;
    background-position: center;
}

.papel .tarifa {
    background: url('../img/vocebanco/papel/felicidade.jpg') no-repeat center;
    background-size: cover;
    height: 248px;
}

.papel .juros {
    background: url('../img/vocebanco/papel/indices.jpg') no-repeat center;
    background-size: cover;
    height: 268px;
}

.papel .educador {
    background: url('../img/vocebanco/papel/gerente.jpg') no-repeat center;
    background-size: cover;
    height: 348px;
}

.papel .oqueperguntar {
    background: url('../img/vocebanco/papel/o_que_perguntar.jpg') no-repeat center;
    background-size: cover;
    height: 277px;
}

.papel .deondevemodinheiro {
    background: url('../img/vocebanco/papel/de_onde_vem_o-dinheiro.jpg') no-repeat center;
    background-size: cover;
    height: 134px;
}

.papel .comosurgirambancos {
    background: url('../img/vocebanco/papel/de_onde_surgiram_os_bancos.jpg') no-repeat center;
    background-size: cover;
    height: 328px;
}

.papel figure.dinheiroPratica {
    background: url('../img/vocebanco/papel/dinheiro.jpg') no-repeat center;
    background-size: cover;
    height: 134px;
    width: 282px;
    float: left;
    margin-right: 10px;
}

.papel figure.emprestimoBancario {
    background: url('../img/vocebanco/papel/emprestimo.jpg') no-repeat center;
    background-size: cover;
    height: 134px;
    width: 282px;
    float: left;
    margin-right: 10px;
}

.papel h3.napratica {
    font-size: 24px;
    text-align: left;
    color: #1a3e4c;
    text-transform: initial;
    margin-bottom: 5px;
    font-family: 'Flama-Medium';
}

b.azul {
  color: #1a3e4c;
    font-weight: bold;  
}

.agencias h4 {
    color: #40ae49;
}

.agencias h3 {
    color: #40ae49;
}

.agencias a {
    color: #40ae49;
}

.agencias div.bar-vb {
    border-bottom: solid 1px #40ae49;
}

.agencias div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo_verde.png') no-repeat;
    background-position: center;
}

.agencias div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_verde.png') no-repeat;
    background-position: center;
}

.agencias .caixa {
    background: url('../img/vocebanco/agencia/caixa.jpg') no-repeat center;
    background-size: cover;
    height: 432px;
}

.agencias .atendimento {
    background: url('../img/vocebanco/agencia/atendimento.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.agencias .autoatendimento {
    background: url('../img/vocebanco/agencia/autoatendimento.jpg') no-repeat center;
    background-size: cover;
    height: 248px;
}

.agencias .sonaagencia {
    background: url('../img/vocebanco/agencia/sonocaixa.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.agencias .senhas {
    background: url('../img/vocebanco/agencia/senhas.jpg') no-repeat center;
    background-size: cover;
    height: 229px;
}

.agencias .cartoesbg {
    background: url('../img/vocebanco/agencia/cartoes.jpg') no-repeat center;
    background-size: cover;
    height: 268px;
}

.agencias .caixaeletronico {
    background: url('../img/vocebanco/agencia/caixaeletronico.jpg') no-repeat center;
    background-size: cover;
    height: 228px;
}

.agencias .banco24horas {
    background: url('../img/vocebanco/agencia/banco24horas.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.agencias .correspondente {
    background: url('../img/vocebanco/agencia/correspondentes.jpg') no-repeat center;
    background-size: cover;
    height: 248px;
}

.produtos h4 {
    color: #d88228;
}

.produtos h3 {
    color: #d88228;
}

.produtos a {
    color: #d88228;
}

.produtos div.bar-vb {
    border-bottom: solid 1px #d88228;
}

.produtos div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo_laranja_claro.png') no-repeat;
    background-position: center;
}

.produtos div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_laranja_claro.png') no-repeat;
    background-position: center;
}

.produtos .creditofinanciamento {
    background: url('../img/vocebanco/produto/creditofinanciamento.jpg') no-repeat center;
    background-size: cover;
    height: 328px;
}

.produtos .investimentoprevidencia {
    background: url('../img/vocebanco/produto/investimentoprevidencia.jpg') no-repeat center;
    background-size: cover;
    height: 348px;
}

.produtos .seguros {
    background: url('../img/vocebanco/produto/seguros.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.produtos .capitalizacao {
    background: url('../img/vocebanco/produto/capitalizacao.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.produtos .consorcio {
    background: url('../img/vocebanco/produto/consorcio.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.produtos .cambio {
    background: url('../img/vocebanco/produto/cambio.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.produtos .contacorrente {
    background: url('../img/vocebanco/produto/contacorrente.jpg') no-repeat center;
    background-size: cover;
    height: 308px;
}

.produtos .cartoesbg {
    background: url('../img/vocebanco/produto/cartoes.jpg') no-repeat center;
    background-size: cover;
    height: 234px;
}

.produtos .pagamentodecontas {
    background: url('../img/vocebanco/produto/pagamentodecontas.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.produtos .compensacaocheque {
    background: url('../img/vocebanco/produto/compensacaocheque.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}


.produtos .debitoautomatico {
    background: url('../img/vocebanco/produto/debitoautomatico.jpg') no-repeat center;
    background-size: cover;
    height: 194px;
}

.canais h4 {
    color: #00aeef;
}

.canais h3 {
    color: #00aeef;
}

.canais a {
    color: #00aeef;
}

.canais div.bar-vb {
    border-bottom: solid 1px #00aeef;
}

.canais div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo_azul.png') no-repeat;
    background-position: center;
}

.canais div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_azul.png') no-repeat;
    background-position: center;
}

.canais .atendimentoTelefonico {
    background: url('../img/vocebanco/canais/atendimento_telefonico.jpg') no-repeat center;
    background-size: cover;
    height: 229px;
}

.canais .atendimentoDigital {
    background: url('../img/vocebanco/canais/atendimento_digital.jpg') no-repeat center;
    background-size: cover;
    height: 135px;
}

.canais .ouvidoria {
    background: url('../img/vocebanco/canais/ouvidoria.jpg') no-repeat center;
    background-size: cover;
    height: 114px;
}

.canais .redesSociais {
    background: url('../img/vocebanco/canais/redes_sociais.jpg') no-repeat center;
    background-size: cover;
    height: 114px;
}

.canais .conteaqui {
    background: url('../img/vocebanco/canais/conteaqui.jpg') no-repeat center;
    background-size: cover;
    height: 114px;
}

.internet h4 {
    color: #a37c20;
}

.internet h3 {
    color: #a37c20;
}

.internet a {
    color: #a37c20;
}

.internet div.bar-vb {
    border-bottom: solid 1px #a37c20;
}

.internet div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo_marrom.png') no-repeat;
    background-position: center;
}

.internet div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_marrom.png') no-repeat;
    background-position: center;
}

.internet .servicos {
    background: url('../img/vocebanco/internet/servicos.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.internet .comofunciona {
    background: url('../img/vocebanco/internet/comofunciona.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.internet .mobile {
    background: url('../img/vocebanco/internet/mobile.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.internet .seguranca {
    background: url('../img/vocebanco/internet/seguranca.jpg') no-repeat center;
    background-size: cover;
    height: 254px;
}


.seguranca h4 {
    color: #d2232a;
}

.seguranca h3 {
    color: #d2232a;
}

.seguranca a {
    color: #d2232a;
}

.seguranca div.bar-vb {
    border-bottom: solid 1px #d2232a;
}

.seguranca div.bar-chevron-down-vb {
    background: url('../img/vocebanco/ico_papel_seta_baixo_vermelho.png') no-repeat;
    background-position: center;
}

.seguranca div.bar-chevron-down-vb-dest {
    background: url('../img/vocebanco/bg_destaque_vermelho.png') no-repeat;
    background-position: center;
}

.seguranca .protejasenha {
    background: url('../img/vocebanco/seguranca/proteja.jpg') no-repeat center;
    background-size: cover;
    height: 294px;
}

.seguranca .comoevitar {
    background: url('../img/vocebanco/seguranca/comoevitar.jpg') no-repeat center;
    background-size: cover;
    height: 268px;
}

.seguranca .naoaceiteajuda {
    background: url('../img/vocebanco/seguranca/naoaceiteajuda.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}

.seguranca .biometria {
    background: url('../img/vocebanco/seguranca/biometria.jpg') no-repeat center;
    background-size: cover;
    height: 150px;
}


@media only screen and (max-device-width: 480px) {
    .vocebanco .bg-menu {
        background: none;
        height: auto;
    }

    .vocebanco .margin-left-50 {
        margin-left: 0 !important;
    }

    .vocebanco .menu {
        float: right;
        margin-right: 5px;
        /*margin-top: -24px;*/
    }

    .vocebanco .bg-menu {
        background: none;
    }

    .vocebanco .menuPrincipalPapel {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .menuPrincipalAgencias {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .menuPrincipalProdutos {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .menuPrincipalCanais {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .menuPrincipalInternet {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .menuPrincipalSeguranca {
        position: inherit;
        margin: 0 auto;
        top: auto;
        left: auto;
        margin-left: auto;
        width: 130px;
        height: 130px;
    }

    .vocebanco .cicle {
        margin-bottom: 15px;
    }

        .vocebanco .cicle span {
            color: #FFF;
            font-family: 'Flama-Bold';
            font-size: 14px;
            margin-top: 40px;
            display: block;
            text-align: center;
        }

    .vocebanco div.bar-chevron-down-vb-dest h3 {
        font-size: 20px;
    }
}