@charset "utf-8";
/* Connect Custom */

/**
	CSS para o projeto específico
**/

#Connect-Container{ font-family: 'foundrymonoline-regular-webfont';}

#Connect-Container .absolute{ position:absolute;}

#Connect-Container .left{ left:50%;}

#Connect-Container h2,
#Connect-Container h3,
#Connect-Container h4,
#Connect-Container ul li,
#Connect-Container p{ font-family: 'foundrymonoline-regular-webfont'; font-weight:normal;}

#Connect-Container h2 strong,
#Connect-Container h3 strong,
#Connect-Container h4 strong,
#Connect-Container p strong{ font-family: 'foundrymonoline-bold-webfont'; font-weight:normal;}

#Connect-Container #Connect-Navigate ul li a{ background:url(../images/bg-menu.png);}

#Connect-Container #Connect-Navigate ul li a.nav:hover,
#Connect-Container #Connect-Navigate ul li a.nav.active{ background:url(../images/bg-menu-hover.png);}

#Connect-Container .Connect-Section{ background-position:center top; background-repeat:no-repeat;}
#Connect-Container .Connect-Section .Connect-Content{ width:850px;}

#Connect-Container #Connect-Section1{ background-image:url(../images/bg-section-1.jpg); height:650px;}
#Connect-Container #Connect-Section1 .logo-brastemp{ left:60px; top:15px;}
#Connect-Container #Connect-Section1 h2{ font-size:16px; color:#6b0036; line-height:16px; text-align:center; width:350px; left:190px; top:40px;}
#Connect-Container #Connect-Section1 .titulo-div{ background:url(../images/bg-titulo-principal.png) left top no-repeat; width:809px; height:650px; right:315px; top:0px;}
#Connect-Container #Connect-Section1 .titulo-div h4{ font-size:12px; color:#fc9850; line-height:12px; text-align:center; width:350px; right:150px; top:265px;}
#Connect-Container #Connect-Section1 .titulo-div h3{ font-size:31px; color:#fd9b1e; line-height:28px; text-align:center; width:350px; right:150px; top:285px}
#Connect-Container #Connect-Section1 .titulo-div h3 strong{ font-size:35px;}
#Connect-Container #Connect-Section1 .titulo-div .paragrafo{ font-size:14px; color:#FFF; line-height:16px; text-align:center; width:350px; right:150px; top:350px;}
#Connect-Container #Connect-Section1 .produto-lava-loucas{ width:395px; height:421px; left:410px; top:117px;}
#Connect-Container #Connect-Section1 .produto-lava-loucas .branco{ background:url(../images/produto-branco.png) left top no-repeat; width:100%; height:100%; position:absolute; left:0; top:0;}
#Connect-Container #Connect-Section1 .produto-lava-loucas .inox{ background:url(../images/produto-inox.png) left top no-repeat; width:100%; height:100%; position:absolute; left:0; top:0;}
#Connect-Container #Connect-Section1 .produto-lava-loucas-aberto{ background:url(../images/produto-aberto.png) no-repeat; background-position:0 0; width:433px; height:426px; left:414px; top:136px; display:none;}
#Connect-Container #Connect-Section1 .produto-lava-loucas-aberto.prateleira1{ background-position:-433px 0;}
#Connect-Container #Connect-Section1 .produto-lava-loucas-aberto.prateleira2{ background-position:-866px 0;}
#Connect-Container #Connect-Section1 .slider-controller{ background:url(../images/base-scroll.png) left top no-repeat; width:321px; height:54px; left:470px; top:536px;}
#Connect-Container #Connect-Section1 .slider-controller .slider-bar{position:absolute; background-color:#4a0333; width:0; height:11px; margin:0; top:7px;}
#Connect-Container #Connect-Section1 .slider-controller .slider-bar.left{ left:50%;}
#Connect-Container #Connect-Section1 .slider-controller .slider-bar.right{ right:50%;}
#Connect-Container #Connect-Section1 .slider-controller .slider-button{ background:url(../images/btn-scroll-cores.png) left top no-repeat; width:37px; height:37px; left:50%; margin-left:-19px; top:-6px;}
#Connect-Container #Connect-Section1 .observacao{ font-size:11px; color:#e1f3f9; line-height:11px; left:36px; top:570px;}
#Connect-Container #Connect-Section1 .botoes{ width:100%; left:0; top:0;}
#Connect-Container #Connect-Section1 .botoes a{ background-position:left top; background-repeat:no-repeat; overflow:hidden; height:0;}
#Connect-Container #Connect-Section1 .botoes .btn-economize{ background-image:url(../images/selo-economize-6-vezes.png); width:83px; padding-top:103px; left:750px; top:95px;}
#Connect-Container #Connect-Section1 .botoes .btn-economize:hover{ opacity:.8;}
#Connect-Container #Connect-Section1 .botoes .btn-modos-de-instalacao{ background-image:url(../images/btn-modos-de-instalacao.png); width:85px; padding-top:39px; right:390px; top:185px;}
#Connect-Container #Connect-Section1 .botoes .btn-modos-de-instalacao:hover{ width:95px;}
#Connect-Container #Connect-Section1 .botoes .label-facil-de-instalar{ left:392px; top:378px; display:none;}
#Connect-Container #Connect-Section1 .botoes .btn-facil-de-instalar{ background-image:url(../images/hotspot.png); width:33px; padding-top:33px; left:410px; top:382px;}
#Connect-Container #Connect-Section1 .botoes .label-por-dentro-da-lava-loucas{ left:575px; top:338px; display:none;}
#Connect-Container #Connect-Section1 .botoes .btn-abrir{ background-image:url(../images/btn-open.png); width:33px; padding-top:33px; left:596px; top:344px;}
#Connect-Container #Connect-Section1 .botoes .btn-fechar{ background-image:url(../images/btn-open.png); width:33px; padding-top:33px; left:610px; top:510px;}
#Connect-Container #Connect-Section1 .botoes .btn-fechar:hover{ opacity:.8;}
#Connect-Container #Connect-Section1 .botoes .btn-cestos-ajustaveis{ background-image:url(../images/hotspot.png); width:33px; padding-top:33px; left:538px; top:220px;}
#Connect-Container #Connect-Section1 .botoes .btn-dispenser{ background-image:url(../images/hotspot.png); width:33px; padding-top:33px; left:670px; top:438px;}
#Connect-Container #Connect-Section1 .content-hotspots{ background-position:left top; background-repeat:no-repeat;}
#Connect-Container #Connect-Section1 .content-hotspots h3{ font-size:18px; color:#f27821; line-height:20px;}
#Connect-Container #Connect-Section1 .content-hotspots h3 strong{ font-size:27px; line-height:27px;}
#Connect-Container #Connect-Section1 .content-hotspots p{ font-size:14px; color:#f0efed; line-height:18px; margin-top:10px;}
#Connect-Container #Connect-Section1 .content-economize{ background:url(../images/transparente-black.png); width:100%; height:100%; left:0; top:0; display:none;}
#Connect-Container #Connect-Section1 .content-economize div{ background:url(../images/content-economize-6-vezes.png) left top no-repeat; overflow:hidden; height:0; width:412px; padding-top:511px; left:50%; margin-left:-206px; top:80px; cursor:pointer;}
#Connect-Container #Connect-Section1 .content-facil-de-instalar{ background-image:url(../images/bg-kit-instala-facil.png); width:522px; height:266px; padding-top:114px; padding-left:140px; left:25px; top:112px; cursor:pointer; display:none;}
#Connect-Container #Connect-Section1 .content-facil-de-instalar h3{ margin-left:35px;}
#Connect-Container #Connect-Section1 .content-cestos-ajustaveis{ background-image:url(../images/bg-cesto-ajustavel.png); width:724px; height:308px; padding-top:95px; padding-left:38px; left:64px; cursor:pointer; top:150px; display:none;}
#Connect-Container #Connect-Section1 .content-dispenser{ background-image:url(../images/bg-dispenser.png); width:500px; height:373px; padding-top:118px; padding-left:124px; left:84px; top:108px; display:none;}
#Connect-Container #Connect-Section1 .content-dispenser h3{ margin-left:50px;}

#Connect-Container #Connect-Section2{ background-image:url(../images/bg-section-2.jpg); height:650px;}
#Connect-Container #Connect-Section2 .botoes{ width:100%; left:0; top:0;}
#Connect-Container #Connect-Section2 .botoes .btn-acquaspray{ background:url(../images/hotspot.png) left top no-repeat; width:33px; height:33px; left:148px; top:274px;}
#Connect-Container #Connect-Section2 .botoes .btn-5-ciclos{ background:url(../images/hotspot-5-ciclos-de-lavagem.png) left top no-repeat; width:268px; height:41px; left:290px; top:185px;}
#Connect-Container #Connect-Section2 .botoes .btn-3-etapas{ background:url(../images/hotspot-etapas.png) left top no-repeat; width:166px; height:37px; left:340px; top:320px;}
#Connect-Container #Connect-Section2 .botoes .btn-8-servicos{ background:url(../images/hotspot.png) left top no-repeat; width:33px; height:33px; left:780px; top:225px;}
#Connect-Container #Connect-Section2 .content-hotspot{ background-position:left top; background-repeat:no-repeat; cursor:pointer;}
#Connect-Container #Connect-Section2 .content-hotspot h3{ font-size:18px; color:#f47920; line-height:20px;}
#Connect-Container #Connect-Section2 .content-hotspot h3 strong{ font-size:25px; line-height:25px;}
#Connect-Container #Connect-Section2 .content-hotspot p{ font-size:14px; color:#f0efed; line-height:18px; margin-top:10px;}
#Connect-Container #Connect-Section2 .content-acquaspray{ background-image:url(../images/bg-acquaspray.png); width:453px; height:264px; padding-top:25px; padding-left:30px; left:68px; top:42px; display:none;}
#Connect-Container #Connect-Section2 .content-5-ciclos{ background-image:url(../images/bg-5-ciclos.png); width:551px; height:334px; padding-top:34px; padding-left:62px; left:158px; top:-24px; display:none;}
#Connect-Container #Connect-Section2 .content-3-etapas{ background-image:url(../images/bg-3-etapas.png); width:378px; height:270px; padding-top:62px; padding-left:25px; left:240px; top:306px; display:none;}
#Connect-Container #Connect-Section2 .content-8-servicos{ background-image:url(../images/bg-8-servicos.png); width:415px; height:259px; padding-top:46px; padding-left:52px; left:370px; top:252px; display:none;}

#Connect-Container #Connect-Section3{ background-image:url(../images/bg-section-3.jpg); height:652px;}
#Connect-Container #Connect-Section3 .modos{ background-image:url(../images/bg-modos-de-instalacao.png); background-position:0 0; background-repeat:no-repeat; overflow:hidden; height:0; width:522px; padding-top:506px; left:167px; top:105px;}
#Connect-Container #Connect-Section3 .modos.nicho{ background-position:-522px 0;}
#Connect-Container #Connect-Section3 .modos.balcao{  background-position:-1044px 0;}
#Connect-Container #Connect-Section3 .btn-nicho{ background:url(../images/btn-nicho.png) left top no-repeat; overflow:hidden; height:0; width:114px; padding-top:61px; left:232px; top:446px;}
#Connect-Container #Connect-Section3 .btn-nicho:hover,
#Connect-Container #Connect-Section3 .btn-nicho.active{ background:url(../images/btn-nicho-hover.png) left top no-repeat;}
#Connect-Container #Connect-Section3 .btn-balcao{ background:url(../images/btn-balcao.png) left top no-repeat; overflow:hidden; height:0; width:114px; padding-top:61px; left:511px; top:446px;}
#Connect-Container #Connect-Section3 .btn-balcao:hover,
#Connect-Container #Connect-Section3 .btn-balcao.active{ background:url(../images/btn-balcao-hover.png) left top no-repeat;}

#Connect-Container #Connect-Section4{ background-image:url(../images/bg-section-4.jpg); height:650px;}
#Connect-Container #Connect-Section4 #Connect-Player{ background:#FFF; width:762px; height:459px; left:42px; top:98px;}

#Connect-Container #Connect-Section5{ background-image:url(../images/bg-section-5.jpg); height:650px;}
#Connect-Container #Connect-Section5 .medidas{ background-image:url(../images/especificacoes-medidas.png); background-repeat:no-repeat; width:330px; height:336px; left:252px; top:248px;}
#Connect-Container #Connect-Section5 .medidas.prev{ background-position:0 0;}
#Connect-Container #Connect-Section5 .medidas.center{ background-position:-330px 0;}
#Connect-Container #Connect-Section5 .medidas.next{ background-position:-660px 0;}
#Connect-Container #Connect-Section5 .btn-prev{ background:url(../images/btn-prev-next.png) left top no-repeat; width:38px; height:38px; left:206px; top:380px;}
#Connect-Container #Connect-Section5 .btn-next{ background:url(../images/btn-prev-next.png) right top no-repeat; width:38px; height:38px; left:592px; top:380px;}
#Connect-Container #Connect-Section5 .btn-prev:hover,
#Connect-Container #Connect-Section5 .btn-next:hover{ opacity:.8;}
#Connect-Container #Connect-Section5 .espec-peso{ left:610px; top:490px;}
#Connect-Container #Connect-Section5 h3{ font-size:25px; color:#670046; line-height:25px; top:110px;}
#Connect-Container #Connect-Section5 h3.dimensoes{ left:62px;}
#Connect-Container #Connect-Section5 h3.conteudo{ left:485px;}
#Connect-Container #Connect-Section5 .lista-dimensoes{ left:82px; top:148px;}
#Connect-Container #Connect-Section5 .lista-dimensoes li{ list-style:outside; font-size:16px; color:#670046; line-height:28px;}
#Connect-Container #Connect-Section5 .lista-dimensoes2{ left:230px; top:148px;}
#Connect-Container #Connect-Section5 .lista-dimensoes2 li{ list-style:outside; font-size:16px; color:#670046; line-height:28px;}
#Connect-Container #Connect-Section5 .lista-conteudo{ left:504px; top:148px;}
#Connect-Container #Connect-Section5 .lista-conteudo li{ list-style:outside; font-size:16px; color:#670046; line-height:28px;}


/**
	Font-Face Connect
**/
@font-face {
	font-family: 'foundrymonoline-regular-webfont';
	src: url('fonts/foundrymonoline-regular-webfont.eot');
	src: url('fonts/foundrymonoline-regular-webfont?#foundrymonoline-regular-webfont') format('embedded-opentype'), /* IE6-IE8 */
		 url('fonts/foundrymonoline-regular-webfont.woff') format('woff'), 
	     url('fonts/foundrymonoline-regular-webfont.ttf') format('truetype'), 
	     url('fonts/foundrymonoline-regular-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'foundrymonoline-bold-webfont';
	src: url('fonts/foundrymonoline-bold-webfont.eot');
	src: url('fonts/foundrymonoline-bold-webfont?#foundrymonoline-bold-webfont') format('embedded-opentype'), /* IE6-IE8 */
		 url('fonts/foundrymonoline-bold-webfont.woff') format('woff'), 
	     url('fonts/foundrymonoline-bold-webfont.ttf') format('truetype'), 
	     url('fonts/foundrymonoline-bold-webfont.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}