@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Condensed|Ubuntu:400,700italic,700,400italic,500,500italic,300italic,300);




*{
font-family:'Ubuntu',Arial, Helvetica, sans-serif;
text-decoration:none;
margin:0;
padding:0;
list-style:none;
background-repeat:no-repeat;

}

a, a:hover{	
	-webkit-transition: all 350ms ease-in-out 0s;
	   -moz-transition: all 350ms ease-in-out 0s;
	    -ms-transition: all 350ms ease-in-out 0s;
	     -o-transition: all 350ms ease-in-out 0s;
	        transition: all 350ms ease-in-out 0s;
}

h1{font-size:62px;text-align:center;}
h2{font-size:36px;}
h3{font-size:24px;}
h4{font-size:18px;}
h5{font-size:24px;}

footer,
.rodape{ width:100%;  height:auto;display:block;float:left; background-image:url(img/bgsombra.png); background-position: center top; }
header{ width:100%;  height:140px;display:block;float:left; background-image:url(img/bgsombra.png); background-position: center top; border-bottom:2px solid #fff;}
.topo{ width:100%; height:190px; display:block;float:left; background-image:url(img/bgsombra.png); background-position: center top;}
.principal{width:100%;height:auto; display:block;float:left; background-image:url(img/bg-abre.jpg); background-position: center top; border-bottom:2px solid #fff;}
footer{ height:49px;}

header.inicial{ display:none}
.topo.inicial{ width:100%; height:60px;}


.copy,
.endereco,
.chamadas,
.contato,
header h1{ width:1140px; line-height:140px;  margin:0 auto}
.contato h4,
.topo h4{ line-height:49px; float:left; padding-right: 30px; }

h4 span{ display:block; height: 49px; width:31px; float:left;}
h4.email_ico span{ background-image:url(img/email_ico.png); background-position: center}
h4.fone_ico span{ background-image:url(img/fone_ico.png); background-position: center}
h4.facebook_ico span{ background-image:url(img/facebook_ico.png); background-position: center}
h4.tools_ico span{ background-image:url(img/img_tool.png); background-position: center}
h4.facebook_ico{ float:right}
h4.tools_ico{ float:right; vertical-align:middle;}
h4.copyright{ float:left; font-weight:normal; width:50%; padding:0; margin:0; line-height:49px; font-size:12px}



.chamada1,
.chamada2{ width:570px; float:left; height:865px}

.chamadas a{ text-align:center; line-height: 30px; text-transform:uppercase}
.chamadas a h3{ font-weight:normal}
.chamadas a h5{ border:5px solid #fff; margin: 20px auto; width:40%; padding:10px;}
.chamadas a:hover h5{ background-color: #fff; color:#ffcc00;
 	-webkit-transition: all 350ms ease-in-out 0s;
	   -moz-transition: all 350ms ease-in-out 0s;
	    -ms-transition: all 350ms ease-in-out 0s;
	     -o-transition: all 350ms ease-in-out 0s;
	        transition: all 350ms ease-in-out 0s;}
.chamadas a span{ width:100%; text-align:center; float:left; padding-top:100px}
.chamadas a img{ margin:auto; text-align:center; float:none}


.endereco{ line-height: 24px; text-align:center; padding-bottom: 50px; text-transform:uppercase;}
.endereco span{ width:100%; text-align:center; float:left; padding-top:100px}
.endereco span img{ margin:auto; text-align:center; float:none}


.apresentacoes h3{}
.apresentacoes li{ width:100%; line-height:36px; float:left; padding: 3px 0;}
.apresentacoes li a{ width:100%; float: left; color:#fff;}
.apresentacoes li a:hover{color:#fecb00}
span.icone{ float: left;  width:36px; height:36px; display:block; }
span.icone.ppt{ background-image: url(img/ppt.png);}
span.icone.pdf{ background-image: url(img/pdf.png);}
span.icone.doc{ background-image: url(img/doc.png);}


/*cores*/


body{ background-color:#353535;}
header{ background-color:#363636;}
footer,
.topo{ background-color:#0f4185;}
a:hover{ color:#ffcc00;} 
.top-bar-section.top-bar-bg-light{	background-color: #0f4185;}
.top-bar-section.top-bar-bg-light a{	color: #fff;}

.navbar-collapse{ background-color:#353535;  background-image:url(../img/sombra.png); background-position: center top; }
.navbar.navbar-bg-light{ background-color:#2b2b2b; }
.service-image img{ background-color:#353535;}
.service-details h3 a,
.service-details h3{ color:#fecb00}
.empresa{ background-color:#1f7a5c; padding:150px 0}




h1 a,
h1,
h2,
h3,
h4,
h4 a,
h5,
h5 a,
p{ color:#fff;}

.faleconsosco h4,
.faleconsosco h3{ text-align:left; float:left; width:90%; line-height: 50px;}
.faleconsosco{ background-color:#5a5a5a; background-image: url(img/bg-fale.png); background-position:top center;}
.col-md-6.faleconsosco,
.col-md-6.contato{ float:left; background-image:none; background-color:transparent}

.empresa{ background-image:url(img/bg_empresa_sbs.png)}
.empresa .col-md-6{ float:right}

.navbar-nav li.grupo a { background-color:#1b1b1b; background-image: url(img/gruposbs_menu.png);  min-width: 187px;}
.navbar-nav li.grupo a:hover{background-color:#0f4185;}

.page-header{
	border-bottom: 1px solid #e1e1e1;
	border-top: 1px solid #e1e1e1;
	padding: 30px 0;
	background-color:#0f4185;
	margin: 0px;
}


a.acesso_remoto{ background-image:url(sbs/img/acesso_remoto.png); width:352px; height:47px; display:block; }
a:hover.acesso_remoto{ background-image:url(sbs/img/acesso_remoto2.png)}


a.acesso_remoto.botao2{ background-image:url(sbs/img/acesso_remoto_botao2.png); }
a:hover.acesso_remoto.botao2{ background-image:url(sbs/img/acesso_remoto2_botao2.png)}

a.acesso_remoto.botao3{ background-image:url(sbs/img/acesso_remoto_botao3.png); }
a:hover.acesso_remoto.botao3{ background-image:url(sbs/img/acesso_remoto2_botao3.png)}

.navbar-default .navbar-toggle .icon-bar{ background-color:#FC0!important;}

/*eccosystem*/
body.eccosystem footer,
body.eccosystem .topo{ background-color:#1f7a5c;}
body.eccosystem .service-details h3 a,
body.eccosystem .service-details h3{ color:#33cc99}
body.eccosystem .service-details h3 a:hover{color:#fecb00}
body.eccosystem .top-bar-section.top-bar-bg-light{	background-color: #1f7a5c;}
body.eccosystem .navbar-nav li.grupo a:hover{background-color:#1f7a5c;}
body.eccosystem .empresa{ background-image:url(img/bg_empresa_eccosystem.png);background-color:#1f7a5c;}
body.eccosystem .page-header{	background-color: #1f7a5c;}


.eccocash{ padding-top:10px; border-right: 1px dotted #ccc}
.eccobuild{ padding-top:10px; border-right: }
.clientecco{ background-color: #265143; padding-top:10px; padding-bottom: 25px;}
.clientecco input{ background-color:#ccc;}

.imagem2 img{ width:60%;}
.imagem3 img{ width:60%;}
.eccocash.imagem3,
.eccobuild.imagem3,
.clientecco.imagem3{ padding-top: 50px; padding-bottom:50px;border-right:none;}
.eccocash.imagem3 p,
.eccobuild.imagem3 p,
.eccocash.imagem3 h4,
.eccobuild.imagem3 h4,
.clientecco.imagem3 p{ padding-left:40px}


.eccocash.imagem3{ background-color:#16503d; margin-bottom:0;}
.eccobuild.imagem3{background-color:#113d2e; margin-bottom:0;}

.modulo{ border-top: 1px dotted #666; padding-top:20px}
.modulo h2{ color:#4db995}


.meusdados{ width:100%; float:left; background-color:#424242;}
.meusdados ul{ width:95%; float:left;}
.meusdados li{ width:40%; float:left; list-style:none; color:#fff;}
.meusdados li.dados{ border:1px solid #666; width: 60%}
.meusdados h4,
.meusdados h2{ margin: 15px; float:left; width:95%}
.meusdados h2{ border-bottom: 3px solid #fff;}
.meusdados h4{ font-weight:normal; }
.meusdados h4 a{ color:#ccc; float:right; font-size: 75%}
.meusdados h4 a:hover{ color:#fecb00;}


.meusdados {
    width: 100%;
    float: left;
    background-color: #424242;
}

.meusdados ul {
    width: 95%;
    float: left;
}

.meusdados li {
    width: 40%;
    float: left;
    list-style: none;
    color: #fff;
}

.meusdados li.dados {
    border: 1px solid #666;
    width: 100%
}

.meusdados h4,
.meusdados h2 {
    margin: 15px;
    float: left;
    width: 95%
}

.meusdados h2 {
    border-bottom: 3px solid #fff;
}

.meusdados h4 {
    font-weight: normal;
}

.meusdados h4 a {
    color: #ccc;
    float: right;
    font-size: 75%
}

.meusdados h4 a:hover {
    color: #fecb00;
}


.seupacoteatual{ width:100%; float:left; background-color:#fff;}
.seupacoteatual ul{ width:95%; float:left; margin:15px;}
.seupacoteatual li{ width:15%; float:left; list-style:none; color:#000; padding: 5px; margin: 0 0;font-size:20px; line-height:16px;}
.seupacoteatual h4,
.seupacoteatual h2{ margin: 15px; float:left; width:95%; color:#666}
.seupacoteatual h2{ border-bottom: 3px solid #666;}
.seupacoteatual li.precot{ font-weight:bold}
.seupacoteatual li.software{ width:20%; font-size:120%; font-weight:bold}
.seupacoteatual li.pacoteatual{ width:100%; font-size:120%}

.cestadecompras{ width:100%; float:left; background-color:#fff;}
.cestadecompras ul{ width:95%; float:left; margin:10px;}
.cestadecompras li{ width:15%; float:left; list-style:none; color:#000; padding: 5px; margin: 0 0;font-size:20px; line-height:36px;}
.cestadecompras h4,
.cestadecompras h2{ margin: 15px; float:left; width:95%; color:#666}
.cestadecompras h2{ border-bottom: 3px solid #666;}
.cestadecompras li.precot{ font-weight:bold}
.cestadecompras li.software{ width:20%; font-size:120%; font-weight:bold}
ul.cabecario{ background-color:#666;  font-weight:bold; color:#fff; }
ul.cabecario li{color:#fff; font-size: 16px;}

.cestadecompras2{ width:100%; float:left; background-color:#fff;}
.cestadecompras2 ul{ width:95%; float:left; margin:15px;}
.cestadecompras2 li{ width:15%; float:left; list-style:none; color:#000; padding: 5px; margin: 0 0;font-size:20px; line-height:36px;}
.cestadecompras2 h4,
.cestadecompras2 h2{ margin: 15px; float:left; width:95%; color:#666}
.cestadecompras2 h2{ border-bottom: 3px solid #666;}
.cestadecompras2 li.precot{ font-weight:bold}
.cestadecompras2 li.software{ width:20%; font-size:120%; font-weight:bold}

.prodBuild{ width:100%; float:left; background-color:#fff;}
ul.prodBuild{ background-color:#666;  font-weight:bold; color:#fff; }
ul.prodBuild li{color:#fff; font-size: 16px;}
.pacotecompra{ width:100%; font-size:130%; color:#000; text-align:left}
.pacotecompraRed {
    width: 100%;
    font-size: 130%;
    color: brown;
    text-align: left
}
.pacotecompra2{ width:100%; font-size:120%; color:#000; text-align:left}
.pacotecombo{ font-size:150%; color:#000; text-align:left}
.msgavulsa{ width:100%; font-size:100%; color:#000; text-align:left}
.licavulsa{ border:1px solid #000; width: 40px; text-align:right}

.prodCash{ width:100%; float:left; background-color:#fff; vertical-align:top}
.prodCash ul{ width:95%; float:left; }
ul.prodCash{ background-color:#666;  font-weight:bold; color:#fff; }
ul.prodCash li{color:#fff; font-size: 16px;}

ul.prod1{ border-bottom:1px solid #666}
.prod1 li.software,
.prod2 li.software{ font-size:28px; font-weight:bold }
.prod1 .prod2 li.pacoteatual{ font-size:18px; }

ul.prod1 select, ul.prod2 select{ border:1px solid #666;}

.salto{width:100%; float:left; background-color:#424242; color:#fff; font-size: 8px; text-align:right}

.total{width:100%; float:left; background-color:#000; color:#fff; padding:10px 15px; font-size: 36px; text-align:right}

.finalizar,
.pagamento{width:100%; float:left;padding:0 15px; text-align:right;  }
.pagamento span{ float:left; background-repeat:no-repeat; background-position:center; width: 180px; height:85px; line-height: 85px}
span.pagseguro{ background-image:url(eccosystem/img/pagseguro.jpg)}
span.paypal{ background-image:url(eccosystem/img/paypal.jpg)}
span.mercadopago{ background-image:url(eccosystem/img/mercadopago.jpg)}

a.saibamais{ background-image:url(eccosystem/img/saibamais.png); width:128px; height:47px; display:block; }
a:hover.saibamais{ background-image:url(eccosystem/img/saibamais2.png)}

a.cliente_ecco{ background-image:url(eccosystem/img/cliente_ecco.png); width:220px; height:47px; display:block; }
a:hover.cliente_ecco{ background-image:url(eccosystem/img/cliente_ecco2.png)}

@media (max-width: 1199px) {
.copy,.endereco,.chamadas,.contato,header h1{ width:100%; }
.chamada1,.chamada2{ width:50%; }

.navbar-nav li.grupo a { background-repeat:no-repeat;}
.navbar-brand img{ width: 250px;}
.navbar-nav li a { line-height: 80px;!important}
.clientes h3 { width: 15%}
header{ height:auto;}
}
@media (min-width: 768px) and (max-width: 991px) {
.navbar-brand img{ width: 220px;}
.navbar-nav li a { line-height: 30px;!important}
.navbar-nav li.grupo a { background-image:none;}
.clientes h3 { width: 20%}
.empresa{padding: 350px 0 100px 0 ;background-position:left top; background-size: 1291px}
.col-md-6.faleconsosco{ width: 100%;}
.faleconsosco{ background-image:url(../img/sombra.png); }
header{ height:auto;}
.topo h4{ line-height:25px; float:left; padding-right: 5px; font-size:12px; }
.contato h4 span { height: 27px; width:27px}
.top-bar-section{ padding-top: 0; padding-bottom:0;}
h4.fone_ico span{ background-size: 27px 27px;}
h4.fone_email span{ background-size: 27px 27px;}
}
@media (max-width: 767px) {
.navbar-nav li a { line-height: 30px;!important}
.navbar-brand img{ width: 200px;}
.navbar-nav li.grupo a { background-image:none;}
.clientes{ padding-top: 200px;}
.clientes h3 { width: 30%}
.empresa{padding: 250px 0 100px 0 ; background-position:left top; background-size:867px}
.col-md-6.faleconsosco{ width: 100%;}
.faleconsosco{ background-image:url(../img/sombra.png); }
header{ height:auto;}
.contato h4,
.topo h4{ line-height:27px; float:left; padding-right: 5px; font-size:12px; }
.contato h4 span { height: 23px; width:23px}
.top-bar-section{ padding-top: 0; padding-bottom:0;}
h4.fone_ico span{ background-size: 23px 23px;}
h4.fone_email span{ background-size: 23px 23px;}
.slider{ display:none;}

}