@charset "utf-8";

/*----------------------------------------------------------
FUNDO PROPOSTA       <<<<<==================================
----------------------------------------------------------*/
.fundo_planos {
display: block;  
height: 0;  
padding-bottom: 18.75%;  /* 300px ÷ 1600px x 100 = 25% */
background: url(../Imagens/fundo_proposta.jpg) no-repeat center center;  
margin-top:40px;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
min-height:50px; /* Altura mínima */
}
.fundo_texto_planos {
color:#FFF;
font-size: 36px;
font-weight:800;
letter-spacing: -1px; /*espaçamento entre as letras*/
line-height: 40px;
text-align:center;
text-outline:#000;
text-shadow:2px 2px 0px #000;

/*background-color:#FFF;*/
/*opacity: 0.8;  */
position: relative;  
width: 80%;  
height: 100px; 
padding-top: 3%;
max-width:100%;
top:40px; left:10%; right:10%;
}
.btn-planos a {
width: 160px;
height: 40px;
display: block;
padding: 10px 15px;
text-decoration: none;
text-align:center;
font-size:20px;
box-sizing: border-box;
border: 2px hidden #FFF;
margin-left: calc((100% - 160px) / 2);
margin-top:50px;
box-shadow: 1px 1px 1px #000033;
border-radius: 10px;
color: #CCC;
background-color: #FFF;
position:absolute;
}
.btn-planos a:hover {
background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.15));
cursor: pointer;
text-decoration: none;
font-weight:bold;
color:#C00;
}

/*----------------------------------------------------------
Alinhar texto ao redor das imagens <<<<<====================
----------------------------------------------------------*/
/*.align left */
.chamada_dif_itens .chamada_dif_col1 h4 img {float:left; margin:0 1em 0 0}
.chamada_dif_itens .chamada_dif_col2 h4 img {float:left; margin:0 1em 0 0}

.chamada_dif_itens .chamada_dif_col2 h4 p {margin:0}
.chamada_dif_itens .chamada_dif_col1 h4 p {margin:0}

.motivos_itens .motivos_col1 h4 img {float:left; margin:0 1em 0 0}
.motivos_itens .motivos_col2 h4 img {float:left; margin:0 1em 0 0}

.motivos_itens .motivos_col2 h4 p {margin:0}
.motivos_itens .motivos_col1 h4 p {margin:0}

/* img.alignleft {float:left; margin:0 1em 1em 0} */
/* img.alignright {float:right; margin:0 0 1em 1em} */
/* img.aligncenter {display: block; margin-left: auto; margin-right: auto} */
/* a img.alignright {float:right; margin:0 0 1em 1em} */
/* a img.alignleft {float:left; margin:0 1em 1em 0} */
/* a img.aligncenter {display: block; margin-left: auto; margin-right: auto} */

/*----------------------------------------------------------
Seção .CHAMADA <<<<<========================================
----------------------------------------------------------*/
.chamada{
height:570px;
text-align:center;
width:100%; /*1300px ÷ 1300px = 1 x 100 = 100%*/
}
.chamada_dif {
height:650px;
text-align:center;
width:100%; /*1300px ÷ 1300px = 1 x 100 = 100%*/
}
.chamada_dif_col1 {
width:40%;
float:left;
margin: 0;
padding: 0 5%;
}
.chamada_dif_col2 {
width:40%;
float:left;
margin: 0;
padding: 0 5%;
}
.chamada_dif_itens {
max-height:auto;
width:90%; 
text-align:justify;
/*margin-top:-10px; */
margin-left:5%;
/*padding-left:2%;
/*background-image:url(../Imagens/fundo_diferencial.png);
background-repeat:no-repeat;*/
}
.chamada h3 p{
color:#006;
font-size: 0.88em; /* 22px ÷ 25px = 0.88em */
font-weight: 600;
letter-spacing: -1px; /*espaçamento entre as letras*/
line-height: 0px;  /* 35px; */
text-align:justify;
margin-left:30px;
}
.chamada h4{
text-align:justify;
}
.chamada h4 p{
width:95%; 
margin-left:30px;
}
.chamada h4 span{
font-weight: 400;
margin-left:60px;
}
.chamada_planos{
height: auto; /*350px; */
text-align:center;
width:90%; /*1300px ÷ 1300px = 1 x 100 = 100%*/
margin-left: 5%;
}

/*----------------------------------------------------------
NOSSOS PLANOS  
----------------------------------------------------------*/
.nossos_planos_CTB {
/*background-color:#CCCCCC; /*#F7F7F7;*/
height: auto;
padding: 0 10%; /* 26px ÷ 1300px = 0.02 x 100 = 2%*/
width:100%; /* 1300px ÷ 1300px = 1 x 100 = 100% .:. 100% - 4% de padding (direita e esquerda) = 96%*/
/*border: 15px solid #F7F7F7;*/
text-align:center;
overflow:hidden;
}

.plano1_CTB {
float: left;
width: 250px;  /* 22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos1_CTB.png) no-repeat center center; 
border-style:none; 
}

.plano2_CTB {
float: left;
width: 250px;  /*22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos2_CTB.png) no-repeat center center; 
border-style:none;
}

.plano3_CTB {
float: left;
width: 250px;  /*22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos3_CTB.png) no-repeat center center; 
border-style:none;
}

.plano4_CTB {
float: left;
width: 250px;  /* 22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos4_CTB.png) no-repeat center center; 
border-style:none;
}

.nossos_planos_BPO {
/*background-color:#CCCCCC; /*#F7F7F7;*/
height: auto;
padding: 0 20%; /* 26px ÷ 1300px = 0.02 x 100 = 2%*/
width:100%; /* 1300px ÷ 1300px = 1 x 100 = 100% .:. 100% - 4% de padding (direita e esquerda) = 96%*/
/*border: 15px solid #F7F7F7;*/
text-align:center;
overflow:hidden;
}

.plano1_BPO {
float: left;
width: 250px;  /* 22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos1_BPO.png) no-repeat center center; 
border-style:none; 
}

.plano2_BPO {
float: left;
width: 250px;  /*22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos2_BPO.png) no-repeat center center; 
border-style:none;
}

.plano3_BPO {
float: left;
width: 250px;  /*22%;  /* 1248px ÷ 4 = 312 ÷ 1248 = 0.25 x 100 = 25% */
height: 350px;
background: url(../Imagens/fundo_planos3_BPO.png) no-repeat center center; 
border-style:none;
}

/*----------------------------------------------------------
PLANO CONTABILIDADE  
----------------------------------------------------------*/
.plano_contabilidade {
height: auto; 
text-align:center;
width:100%; /*1300px ÷ 1300px = 1 x 100 = 100%*/
overflow:hidden;
}

.tabela_servicos_CTB {
display: block;  
height: 0;  
padding-bottom: 25%;  /* 400px ÷ 1600px x 100 = 25% */
background: url(../Imagens/servicos_contabilidade.png) no-repeat center center;  
margin-top: -20px; /*10px; */
margin-bottom: 0;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 90% 90%;
min-height: 500px; /* Altura mínima */
border-style:none; 
}

/*----------------------------------------------------------
PLANO BPO FINANCEIRO  
----------------------------------------------------------*/
.plano_bpo_financeiro {
height: auto; 
text-align:center;
width:100%; /*1300px ÷ 1300px = 1 x 100 = 100%*/
overflow:hidden;
}

.tabela_servicos_BPO {
display: block;  
height: 0;  
padding-bottom: 25%;  /* 400px ÷ 1600px x 100 = 25% */
background: url(../Imagens/servicos_bpofinanceiro.png) no-repeat center center;  
margin-top: -60px; /*10px; */
margin-bottom: 0;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 80% 80%;
min-height: 500px; /* Altura mínima */
border-style:none; 
}

/*----------------------------------------------------------
#INFORMACAO - Conteúdo com 2 colunas  <<<<<=================
----------------------------------------------------------*/
#informacao{
height:180px;  /*250px;*/
width:100%; /*1200px ÷ 1200px = 1 x 100 = 100%*/
max-width:100%; 
margin:0 20%; 
overflow:hidden; 
}
#faixa{
width:100%; 
height:200px; 
padding:0 0;
margin-left:10%;
}
.qdd_itens{
width:30%;  
float:left;
overflow:hidden;
margin:0;
height:200px;
}
.qdd_itens p{
margin:10px auto;
line-height: 0.9090909em; /* 20px ÷ 22px; */
}
.img_itens{
/*float:left; */
margin-right:10px;
}
.image1 { background-image:url(../Imagens/Icones/web/contabilidade.png); }
.image2 { background-image:url(../Imagens/Icones/web/bpo_financeiro.png); }

.hover-background-image{
/* background-image:url(../Imagens/Icones/web/calculadora.png); */
background-position:left center;
background-repeat:no-repeat;
display:block;
width:120px;
height:100px;
margin:0;
-webkit-transition:background-position 0.25s ease;
-moz-transition:background-position 0.25s ease;
-o-transition:background-position 0.25s ease;
-ms-transition:background-position 0.25s ease;
transition:background-position 0.25s ease;
}
.qdd_itens a, .qdd_itens a:link, .qdd_itens a:visited, .qdd_itens a:active, .qdd_itens a:hover{
text-decoration:none; /*retira o sublinhado dos links*/
}
.qdd_itens:hover .hover-background-image{
background-position:right center;
}
.qdd_itens:hover .txt_info {
color:#CC0000; 
text-decoration:none;
font-weight:bolder;
}
.element{
display:block;
width:100px;
height:100px;
margin:0 auto;
background:#dddddd;
background:-moz-linear-gradient(top, #ddd 0%, #aaa 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ddd), color-stop(100%, #aaa));
background:-webkit-linear-gradient(top, #ddd 0%, #aaa 100%);
background:-o-linear-gradient(top, #ddd 0%, #aaa 100%);
background:-ms-linear-gradient(top, #ddd 0%, #aaa 100%);
background:linear-gradient(to bottom, #ddd 0%, #aaa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#aaaaaa',GradientType=0 );
}
.txt_info{
font-size:0.8888888em; /* 16px ÷ 18px  */
font-weight:600;
color:#666;
/* text-transform:uppercase; */
text-align:left;
} 
.txt_link{
font-size:0.7777777em; /* 14px ÷ 18px  */
color:#333; 
text-decoration:none;
text-align:left;
text-shadow:1px 1px 0px #F5F5F5;

-webkit-transition:all ease-out 300ms; -moz-transition:all 300ms ease-out; -ms-transition:all 300ms ease-out; -o-transition:all 300ms ease-out;
}
.txt_link:visited{
color:#333; 
text-decoration:none;
}
/*
.txt_link:hover{
color:#CC0000; 
text-decoration:none;
font-weight:bolder;*/
}

/*----------------------------------------------------------*/
@media screen and (max-width: 1350px){
/*.chamada*/
.chamada, .motivos {
height: auto;
}
.chamada_dif, .motivos_contratar {
height:auto;
}
/* .fundo proposta */
.fundo_texto_planos {
font-size: 30px;
}
}
/*----------------------------------------------------------*/
@media screen and (max-width: 940px){
/*.informacao*/
#informacao{
height:auto;
margin:0 0;
}
.qdd_itens{
width:30%;  
overflow:hidden;
margin-left:10%;
height:200px;
}
}
/*----------------------------------------------------------*/
@media screen and (max-width: 915px){
.btn-planos a {
top:150px;
}
}
/*----------------------------------------------------------*/
@media screen and (max-width: 800px){
/*.chamada*/
.chamada h4 p, .motivos h4 p{
width:90%; 
margin-left:10px;
}
.plano_contabilidade .tabela_servicos_CTB {
padding-bottom: 15%;  /* 400px ÷ 1600px x 100 = 25% */
}
.plano_bpo_financeiro .tabela_servicos_BPO {
padding-bottom: 15%;  /* 400px ÷ 1600px x 100 = 25% */
}
}
@media screen and (max-width: 750px){
/*.informacao*/
#informacao{
margin: 0;
height: 250px;
}
.faixa{
height: 300px;
margin-left:0%;
}
.qdd_itens{
width:80%; 
height:auto;
}
/*.align left */
.qdd_itens .example a .hover-background-image.image1 {float:left; margin:0 1em 0 0}
.qdd_itens .example a .hover-background-image.image2 {float:left; margin:0 1em 0 0}
.qdd_itens .example a .txt_info {padding-top: 35px;} 
.qdd_itens .example a .txt_link {margin:0;} 
}
/*----------------------------------------------------------*/
@media screen and (max-width: 650px){
.plano_contabilidade .tabela_servicos_CTB {
padding-bottom: 10%;  /* 400px ÷ 1600px x 100 = 25% */
}
.plano_bpo_financeiro .tabela_servicos_BPO {
padding-bottom: 10%;  /* 400px ÷ 1600px x 100 = 25% */
}
}
/*----------------------------------------------------------*/
@media screen and (max-width: 500px){
.plano_contabilidade .tabela_servicos_CTB {
min-height: 350px; /* Altura mínima */
/*padding-bottom: 15%;  /* 400px ÷ 1600px x 100 = 25% */
}
.plano_contabilidade p {
font-size: 12px  /* 400px ÷ 1600px x 100 = 25% */
}
.plano_bpo_financeiro .tabela_servicos_BPO {
min-height: 350px; /* Altura mínima */
/*padding-bottom: 15%;  /* 400px ÷ 1600px x 100 = 25% */
}
}
/*----------------------------------------------------------*/
@media screen and (max-width: 497px){
.btn-planos a {
top:200px;
}
}