@CHARSET "ISO-8859-1"; ::-moz-selection{ background:#000; color: #fff; } ::selection{ background:#000; color: #fff; } body, html{ margin: 0 auto; padding: 0; font-size: 12px; font-family: 'Abel', sans-serif; height: 100%; width: 100%; max-width: 2000px;} body{ min-height: 100%; } select, input, textarea{ font-family: sans-serif; font-size: 12px; outline: 0px; resize: none; } h1, h2, h3, h4, h5{ margin: 0; padding: 0; } a, a img{ border: 0px; outline: none; text-decoration: none; } a img:HOVER, a:HOVER{ text-decoration: underline; border: 0px; } .noMarginRight{ margin-right: 0px !IMPORTANT; } .noMarginLeft{ margin-left: 0px !IMPORTANT; } .noMargin{ margin: 0px !IMPORTANT; } .noPaddingRight{ padding-right: 0px !IMPORTANT; } .noPaddingLeft{ padding-left: 0px !IMPORTANT; } .noPadding{ padding: 0px !IMPORTANT; } .noBackground{ background: none !IMPORTANT; } .floatRight{ float: right !IMPORTANT; } .floatLeft{ float: left !IMPORTANT; } .displayNone{ display: none; } .noBorder{ border: 0px !IMPORTANT; } .noBackground{ background: none !IMPORTANT; } .mainBody{ margin:0 auto; width: 960px; position:relative; } .clearfix{zoom:1;} .clearfix:after{clear:both; content:"."; display:block; height:0; visibility:hidden;} .clearfix{*zoom:1;} #desenvolvido_por_hit_agencia_digital{ width: 22px; height: 22px; overflow:hidden; cursor: pointer; position: absolute; top: 17px; right: 30px; } #desenvolvido_por_hit_agencia_digital:hover a{ -webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -o-transform:rotate(-360deg); transform:rotate(-360deg); } #desenvolvido_por_hit_agencia_digital a{ -webkit-transition: -webkit-transform 600ms ease-in-out; -moz-transition: -moz-transform 600ms ease-in-out; -o-transition: -o-transform 600ms ease-in-out; transition: transform 600ms ease-in-out; width: 22px; height: 22px; display: block; } #page{ min-height: 100%; position: relative; } #body{ padding-bottom: 76px; } #footer{background: #706e6e; font-size: 15px; color: #fff; position: absolute; bottom: 0; z-index: 200; width: 100%; height: 76px; box-sizing: border-box; padding: 20px 0 0;} #footer a{color: #fff;} #header{background: #fff;} #header .logo{float: left; width: 182px; height: 126px; margin: 10px 0;} #header .logo h1{margin: 0; padding: 0;} #header ul.menu{float: right;} #header ul.menu li{padding: 0; margin: 0; list-style: none; display: inline-block;} #header ul.menu li .item{display: block; padding: 55px 14px; float: left; text-decoration: none;} #header ul.menu li:last-child .item{padding-right: 0;} #header ul.menu li .item > span{padding: 0 0 4px; border-bottom: 2px solid #c8de79; font-size: 15px; color: #556270;} #header ul.menu li .item:HOVER span, #header ul.menu li .item.selected span{color: #c8de79;} #footer .coluna{float: left; padding: 5px 0 5px 30px; margin: 2px 25px 0 0;} #footer .coluna.telefone{background: url(images/footer-telefone.png) center left no-repeat;} #footer .coluna.endereco{background: url(images/footer-endereco.png) 6px center no-repeat;} #footer .coluna.email{background: url(images/footer-email.png) center left no-repeat;} #footer .social{display: block; float: left; width: 28px; height: 28px; margin: 3px 3px 0;} #footer .social.facebook{background: url(images/footer-facebook.png) center center no-repeat;} #footer .social.instagram{background: url(images/footer-instagram.png) center center no-repeat;} #footer .social.blogger{background: url(images/footer-blogger.png) center center no-repeat;} #footer .ezoom{background: url(images/desenvolvido-por-ezoom.png) top left no-repeat; width: 55px; height: 26px; float: right; display: block;} #banner{height: 570px; background-position: center top; background-repeat: no-repeat; background-size: cover;} #banner .mainBody{height: 570px;} #banner-mask {width: 1149px; height: 570px; background: url(images/banner-mask.png) no-repeat; position: absolute; top: 0; left: -520px;} #banner h2{position: absolute; top: 150px; color: #fff; font-family: 'Volkorn', 'Abel', sans-serif; font-size: 40px; font-style: italic; font-weight: normal; width: 350px; letter-spacing: -0.04em; line-height: 42px;} #banner h3{position: absolute; top: 277px; color: #fff; font-size: 18px; line-height: 28px; width: 305px; letter-spacing: -0.01em; font-weight: normal;} #banner a.descubra-mais{display: block; background: url(images/descubra-mais.png) top left no-repeat; width: 175px; height: 45px; position: absolute; top: 373px;} #banner a.descubra-mais:HOVER{text-decoration: none; filter: brightness(1.1); -webkit-filter: brightness(1.1);} #banner .flecha{background: url(images/banner-flecha.png) center center no-repeat; width: 34px; height: 18px; padding: 10px 6px; border: 3px solid #808080; position: absolute; bottom: 17px; left: 50%; margin-left: -27px;} #home .aspa-esquerda{width: 580px; margin: 60px auto 80px; background: url(images/aspa-esquerda.png) top left no-repeat; color: #c4dc6f; font-size: 30px; font-family: 'Volkorn', 'Abel', sans-serif; font-style: italic; line-height: 39px; letter-spacing: -0.03em; text-align: center;} #home .aspa-esquerda .aspa-direita{background: url(images/aspa-direita.png) bottom right no-repeat;} #home .studio{background: url(images/home-studio-bg.png) top right repeat-y; height: 431px; margin: 0 0 160px; position: relative; z-index: 20;} #home .studio .imagens{float: left; width: 437px; position: relative;} #home .studio .imagens .listagem{width: 392px; margin: 8px auto 0;} #home .studio .imagens .listagem .owl-nav > div{position: absolute; background: url(images/studio-flechas.png) top left no-repeat; width: 13px; height: 29px; top: 33px; left: -20px;} #home .studio .imagens .listagem .owl-nav > div.owl-next{left: auto; right: -20px; background-position: top right;} #home .studio .texto{float: right; width: 460px; margin: 40px 0 0; color: #556270; font-size: 17px; letter-spacing: -0.02em; line-height: 25px;} #home .studio .texto h2{color: #c4dc6f; font-size: 40px; font-family: 'Volkorn', sans-serif; font-style: italic; font-weight: normal;} #home .studio .texto .linha{width: 94px; border-bottom: 4px solid #dde9b2; margin: 30px 0 35px;} #home .borda-studio{width: 467px; height: 431px; top: -17px; left: -15px; position: absolute; border: 2px solid #cccccc; z-index: 10;} #home .sorriso{position: relative; margin: 0 0 80px;} #home .sorriso .texto{float: left; width: 420px; margin: 10px 0 0; color: #556270; font-size: 17px; letter-spacing: -0.02em; line-height: 25px;} #home .sorriso .texto .linha{width: 94px; border-bottom: 4px solid #dde9b2; margin: 20px 0 35px;} #home .sorriso .imagem{float:right; width: 332px; height: 416px; position: relative; z-index: 20; margin: 0 40px 0 0;} #home .sorriso .borda-imagem{position: absolute; top: 13px; right: 25px; width: 332px; height: 416px; border: 1px solid #ccc; z-index: 10;} .titulo-padrao{color: #c4dc6f; font-size: 40px; font-family: 'Volkorn', sans-serif; font-style: italic; font-weight: normal; line-height: 34px;} .texto-padrao{font-size: 16px; line-height: 25px; color: #6f6f6f; font-weight: normal;} #renovacao .texto .linha, .linha-padrao{width: 100px; border-bottom: 3px solid #a9a8a8; margin: 30px 0;} #renovacao .fotos{height: 494px; margin: 40px 0;} #renovacao .fotos .left, #renovacao .fotos .right{width: 50.00%; float: left; height: 494px; position: relative; overflow: hidden;} #renovacao .fotos .over{max-width: 838px; height: 494px; width: 100%; box-sizing: border-box; padding: 30px 35px; position: absolute; top: 0; right: 100%; -webkit-transition: all 500ms ease-out; transition: all 500ms ease-out;} #renovacao .fotos .right .over{float: left; right: auto; left: 100%;} #renovacao .fotos .over table{background: rgba(0,0,0,0.7); width: 100%; height: 100%;} #renovacao .fotos .over table td{color: #fff; text-align: center; font-family: 'Volkorn', sans-serif; font-style: italic; font-size: 65px; line-height: 66px;} #renovacao .fotos .left:HOVER .over{right: 0;} #renovacao .fotos .right:HOVER .over{left: 0;} #renovacao .passo-a-passo{margin: 50px 0;} #renovacao .passo-a-passo .titulo-processo{color: #737272; font-size: 35px; font-style: italic; font-family: 'Volkorn', sans-serif; text-align: center; margin-bottom: 20px;} #renovacao .passo-a-passo .itens{background: #f7f4f4; padding: 40px 0;} #renovacao .passo-a-passo .itens .item{width: 280px; margin: 0 20px 45px; float: left; text-align: center;} #renovacao .passo-a-passo .itens .item.item-0{clear: left;} #renovacao .passo-a-passo .itens .item.item-2{clear: right;} #renovacao .passo-a-passo .itens .item .titulo{color: #737272; font-size: 22px; text-align: center; margin-bottom: 20px} #renovacao .passo-a-passo .itens .item .imagem{margin-bottom: 20px;} #renovacao .atributo{margin-bottom: 50px;} #renovacao .atributo .texto{float: left; width: 405px;} #renovacao .atributo .imagem{float: right; width: 470px;} #renovacao .cases{background: url(images/cases-bg.png) center top no-repeat; padding: 15px 0; position: relative; margin-bottom: 50px;} #renovacao .cases .listagem{width: 1903px; margin: 0 auto; min-height: 320px} #renovacao .cases .listagem .item{display: block; width: 212px; height: 226px;} #renovacao .cases .listagem .item .selected{opacity: 0; background: url(images/case-selecionado.png) bottom center no-repeat; width: 212px; height: 30px; position: absolute; bottom: 0px; left: 0; -webkit-transition: all 500ms ease-out; transition: all 500ms ease-out;} .grayscale{ -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; filter: url("data:image/svg+xml;utf8,#greyscale"); } #renovacao .cases .listagem .owl-item.center img{ -webkit-filter: grayscale(0); filter: grayscale(0); filter: none; } #renovacao .cases .listagem .owl-item.center .selected{opacity: 1;} #renovacao .cases .owl-controls{position: absolute; width: 960px; left: 50%; margin: 0 0 0 -480px; bottom: 0} #renovacao .cases .owl-controls .owl-nav{float: right; } #renovacao .cases .owl-controls .owl-nav > div{float: left; width: 54px; height: 54px; display: block; background: #c4dc6f; margin-right: 2px;} #renovacao .cases .owl-controls .owl-nav > div span{background: url(images/flechas-brancas.png) top left no-repeat; width: 24px; height: 18px; float: left; margin-top: 18px; margin-left: 15px} #renovacao .cases .owl-controls .owl-nav > div.owl-next span{background-position: top right;} .gotop { position: absolute; bottom: 0px; display: block; right: -30px; padding: 18px; background: #c4dc6f; transform: rotate(90deg); } .gotop .seta { display: block; margin: 0px auto; width: 24px; height: 18px; background: url(images/flechas-brancas.png) top left no-repeat; width: 24px; height: 18px; } #renovacao .case{background: #F6F6F6; height: 469px; margin-bottom: 50px;} #renovacao .case .mainBody{width: 990px;} #renovacao .case .imagem{float: left; width: 475px; border-left: 11px solid #c4dc6f;} #renovacao .case .imagens{position: relative; float: right; width: 480px; text-align: center; height: 469px;} #renovacao .case .imagens img{margin: 6px;} #renovacao .case .imagens img.selected, #renovacao .case .imagens img:HOVER{ -webkit-filter: grayscale(0); filter: grayscale(0); filter: none; } #renovacao.beleza-rosto .imagens{margin: 0 0 50px;} #renovacao.beleza-rosto .imagens div{float: left; width: 461px; background: url(images/beleza-rosto.png) 0 10px no-repeat; padding: 0 0 10px 10px;} #renovacao.beleza-rosto .imagens div img{margin: 0 0 40px;} #renovacao.beleza-rosto .imagens div.left{clear: left; margin-left: -15px;} #renovacao.beleza-rosto .imagens div.right{clear: right; float: right;} #renovacao.contato .social{float: right; margin-top: 10px;} #renovacao.contato .social a{display: block; float: left; width: 28px; height: 28px; margin: 3px 3px 0;} #renovacao.contato .social a.facebook{background: url(images/footer-facebook.png) center center no-repeat;} #renovacao.contato .social a.instagram{background: url(images/footer-instagram.png) center center no-repeat;} #renovacao.contato .social a.blogger{background: url(images/footer-blogger.png) center center no-repeat;} #renovacao.contato .form{width: 765px; margin: 0 0 50px;} #renovacao.contato .form .input input, #renovacao.contato .form .input textarea{padding: 10px 20px; color: #6f6f6f; font-family: 'Abel', sans-serif; font-size: 15px; margin-bottom: 20px; border: 1px solid #ccc; width: 100%; box-sizing: border-box;} #renovacao.contato .form .input textarea{height: 100px;} #renovacao.contato .form button{float: right; color: #6f6f6f; background: #c4dc6f; font-size: 15px; padding: 10px 25px; border: 0; cursor: pointer;} #renovacao.contato #mapa{height: 445px;} #renovacao .equipe{background: #f0f2f2; padding: 60px 0;} #renovacao .equipe .membro{margin-bottom: 80px;} #renovacao .equipe .membro .imagem{float: left; width: 240px;} #renovacao .equipe .membro .right{width: 670px; float: right;} #renovacao .equipe .membro .right h2{float: left; color: #c4dc6f; font-size: 40px; font-style: italic; font-family: 'Volkorn', sans-serif; border-bottom: 3px solid #c4dc6f; padding-bottom: 15px; margin-bottom: 30px; font-weight: normal;} #renovacao .equipe .membro .right ul, #renovacao .equipe .membro .right ul li{list-style: none; padding: 0; margin: 0;} #renovacao .equipe .membro .right ul li{background: url(images/equipe-item.png) center left no-repeat; padding: 6px 0 10px 50px;} #renovacao .equipe .membro .right ul{padding: 20px 0;} #renovacao .avaliacao{ margin-bottom: 60px; background: url(images/avalie-bg.png) center 95px no-repeat;} #renovacao .avaliacao .left {width: 440px; height: 530px; padding-right: 15px; overflow-y: auto; float: left; box-sizing: border-box; padding: 20px; background: #f3f3f3;} #renovacao .avaliacao .left::-webkit-scrollbar-track{ border-radius: 5px; background-color: #f1f1f1; } #renovacao .avaliacao .left::-webkit-scrollbar{ width: 11px;} #renovacao .avaliacao .left::-webkit-scrollbar-thumb{ min-height: 100px; border-radius: 5px; background-color: #c4dc6f; border: 1px solid #d1d1d1;} #renovacao .avaliacao .left .item{margin-bottom: 30px; font-size: 16px; line-height: 25px; letter-spacing: -0.03em;} #renovacao .avaliacao .left .item p{margin: 0; padding: 0;} #renovacao .avaliacao .left .item a.link{color: #b3ca61; font-size: 15px; line-height: 35px;} #renovacao .avaliacao .right{background: url(images/avaliacao-imagem.png) bottom right no-repeat; padding: 0 15px 15px 0; float: right; margin-right: -100px;} @media all and (max-width: 1903px) { #renovacao .cases .listagem{width: 1500px;} } @media all and (max-width: 1500px) { #renovacao .cases .listagem{width: 1070px;} } @media all and (max-width: 1070px) { #renovacao .cases .listagem{width: 900px;} } .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(11%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(11%); } 100% { -webkit-transform: translateY(0%); } }