* { margin: 0; padding: 0; outline: 0; } body, html { height: 100%; margin: 0; padding: 0 } body { font-size: 12px; line-height: 22px; font-family: 'DroidSans', arial, sans-serif; color: #828282; background: url(images/main-bg.jpg) repeat 0 0; min-width: 100%; } table { width: 100%; } table.footer-cols { width: 100%; } /*font-family: 'DroidSans', sans-serif;*/ a { color: #0252aa; text-decoration: none; cursor: pointer; } a:hover { text-decoration: underline; } a img { border: 0; } a.more {display:block; padding-left: 11%; font-size: 0; line-height: 0; text-decoration: none; width: 100px; height: 40px; background: url(images/bt-sabermais.png) no-repeat; } a.more:hover {text-decoration: none; width: 100px; height: 40px; background: url(images/bt-sabermais-hoover.png) no-repeat; } a.more:active {text-decoration: none; width: 100px; height: 40px; background: url(images/bt-sabermais-click.png) no-repeat; } .cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; } .return { background: url(images/returnTop.png) no-repeat; width: 50px; height:50px; float: right; z-index: 900; } .notext { font-size: 0; line-height: 0; text-indent: -4000px; } .left, .alignleft { float: left; display: inline; } .right, .alignright { float: right; display: inline; } article, aside, details, footer, header, menu, nav, section { display: block; } .shell { width: 990px; margin: 0 auto; } .container { } #header { height: 100px; padding-left: 5px; padding-right: 5px; } #logo { width: 250px; float: left; padding-top: 15px; font-size: 0; line-height: 0;} #logo a { height: 80px; display: block; background: url(images/logo.png) no-repeat 0 0; text-indent: -4000px; } .socialzone { float: right; } #facebook { width: 100px; float: right; font-size: 0; line-height: 0;} #facebook a { height: 100px; display: block; background: url(images/facebook-item.jpg) no-repeat 0 0; text-indent: -4000px; } #navigation { height: 105px; padding-top: 5px; font-family: 'DroidSans', sans-serif; font-weight: 400; background: url(images/nav-bg.png)no-repeat center; } #navigation ul { list-style: none; /*list-style-position: outside;*/ padding-left: 9.2%; } #navigation ul li { float: left; width: 15%; line-height: 100px; font-size: 125%; text-transform: uppercase; } #navigation ul li a { display: block; text-align: center; color: #878787; } #navigation ul li a:hover, #navigation ul li.active a { text-decoration: none; color: #18A68D; font-family: 'DroidSans', sans-serif; font-weight: 700; } #navigation ul li.first a { /*padding-left: 38px;*/ } #navigation a.nav-btn { display: none; } #nav-where { padding: 1% 0 0 0; margin: 20px 0 20px 0; background-color: #18A68D ; height: 30px; } #nav-where div { float: left; color: #ffffff; text-decoration: none; display: block; padding-left: 20px; position: relative; } #nav-where .where {} #nav-where div a { color: #ffffff; } #nav-where div .arrow {background-position: center; } #navigation div.active a {} .slider-holder { position: relative; z-index: 5; padding-left: 9.7%; } .slider-holder span.slider-b { background: url(images/slider-bottom.png) no-repeat; width: 800px; height: 40px; position: absolute; bottom: -40px; left: 9.7%; z-index: 100;} .slider { width: 800px; height: 400px; position: relative; background: url(images/main-bg.jpg) no-repeat 0 0;} .slider ul.slides { list-style: none; list-style-position: outside; } .slider ul.slides li { width: 800px; height: 400px; float: left; position: relative; overflow: hidden; } .slider ul.slides li .img-holder { width: 800px; height: 400px; position: absolute; top: 0px; left: 0px; } .slider ul.slides li .img-holder img { width: 800px; height: 400px; } .flex-control-nav { left: 480px; } .main { padding: 47px 0px 0px; background: background-image: url(images/main-bg.jpg) repeat 0 0; } .main h2 { font-size: 22px; color: #18A68D; line-height: 22px; padding-bottom: 8px; font-family: 'DroidSans', sans-serif; font-weight: 500; } #title {color: #e97770 !important; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 3em; text-align: center; padding: 10px 0 10px 0; } #title2 {padding: 10px 15% 70px 15%; font-size: 14px; } .main h3 { font-size: 18px; color: #5e5e5e; line-height: 22px; padding-bottom: 8px; font-family: 'DroidSans', sans-serif; font-weight: 500; } .main section .endSection, .postServicos, .postPortfolio01 { clear: both; background: url(images/section.png) no-repeat center bottom; padding: 0 20px 60px; } .main ul { list-style: none; list-style-position: outside; } .main ul li { padding-bottom: 6px; padding-left: 10px; background: url(images/arr-ico.png) no-repeat 0 8px; } .main ul li a { color: #18A68D; text-decoration: underline; } .main ul li a:hover { text-decoration: none; } .main .cols { padding-left: 11%; padding-right: 0; } .main .cols .col { margin-bottom: 5%; width: 250px; float: left; } .main .cols .col:after { content:''; width: 100%; clear: both; } .main .cols .col + .col { padding-left: 55px; } .main .cols .col img { float: left; width: 175px; height: 180px; } .main .cols .col-cnt { width: 183px; float: left; } .main .cols .col-cnt h2 {font-size: 0; line-height: 30px;} .main .cols .col-cnt p {font-family: 'DroidSans', sans-serif; font-weight: 400; font-size: 14px; text-align: center; color: #878787; margin-bottom: 15px;} .main .cols .col-cnt a {margin-left: 20%;} .main .post {} .main .post .who p {} .main .post h2 { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 24px; padding: 3% 0 0 8%; } .main .post p {font-family: 'DroidSans', sans-serif; font-weight: 400; font-size: 14px; text-align: left; color: #878787; padding: 1% 10% 30px 10%; } .main .post p strong {} .main .post-cnt { float: left; margin-left: 11%; width: 750px; } .main .post #back-areas { width: 960px; height: 800px; background: url(images/eidetica/bg-Eidetica.png) no-repeat; } .main .post .imagem-holder { width: 200px; height: 200px; float: left; padding-left: 9%; padding-top: 7%; } .main .postPortfolio01 .post-cntPortfolio h2 { font-family: 'DroidSans', sans-serif; font-weight: 400; font-size: 18px; padding-top: 20px; } .main .postPortfolio01 .post-cntPortfolio h2 strong { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 26px; } .main .postServicos { padding-top: 28px; padding-left: 40px; } .main .postServicos .fotoServicos { width: 435px; height: 245px; float: left; margin-right: 20px; } .main .postServicos h2 { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 24px; padding-bottom: 15px; } .main .postServicos p { font-family: 'DroidSans', sans-serif; font-weight: 400; font-size: 14px; padding-bottom: 8px; } .main .postServicos p strong { font-size: 14px; display: block; } .main .post-cnt-servicos { float: right; width: 475px; font-size: 14px; } .main .postServicos ul li { list-style: circle inside; font-size: 14px; } .main .testimonial { padding-top: 20px; padding-bottom: 20px; text-align: left; background: transparent; font-size: 14px; } .main .testimonial h3 { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 24px; text-align: center; } .main .testimonial strong.quote { font-size: 28px; font-family: georgia ,arial, helvetica, serif; position: relative; top: 10px; left: -6px; } .testimonial h2 { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 24px; padding-bottom: 12px; text-align: center; } .testimonial p { padding-bottom: 6px; font-size: 14px; } .main .testimonial .complements { width: 40%; float: left; padding: 5%; } .main .testimonial .complements a { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 20px; } .testimonial p.author { text-align: right; } .socials { height: 40px; background: url(images/bottom-esq.jpg) no-repeat left; } .socials a { text-decoration: none; float:right; padding-right: 1%; position: relative; } .socials a:hover {} #footer { background: url(images/footer-cols.png) repeat 0 0;} #footer h2 { font-size: 1em; color: #fff; font-family: 'DroidSans', sans-serif; font-weight: 400; } .footer-cols { padding: 30px 15px; background: url(images/footer-lights.png) no-repeat center 0px; } .footer-cols .col { float: left; width: 195px; } .footer-cols .col + .col { padding-left: 0px; } .footer-cols .col ul { list-style: none; list-style-position: outside; } .footer-cols .col ul li { color: #ffffff; font-size: 14px; padding-bottom: 4px; padding-left: 9px; } .footer-cols .col ul li a { color: #ffffff; } #us-footer {float: right; width:300px; height:200px; background: url(images/us-footer.png) no-repeat; background-position: 30px 0} #logo-footer { float: left; width:150px; height:200px; margin-left: 11%; } .footer-bottom { background: url(images/footer-bottom.png) repeat; height: 38px; padding-top: 24px; padding: 24px 20px 0; border-top: 1px solid #262c2c; } .footer-bottom .footer-nav { float: left; line-height: 11px; } .footer-bottom .footer-nav ul { list-style: none; /*list-style-position: outside;*/ } .footer-bottom .footer-nav ul li { display: inline; font-size: 11px; color: #9e9e9e; border-left: 1px solid #18A68D; padding: 0 11px; } .footer-bottom .footer-nav ul li.first { padding-left: 0; border: 0; } .footer-bottom .footer-nav ul li a { color: #18A68D; } .footer-bottom .footer-nav ul li a:hover, .footer-bottom .footer-nav ul li.active a { color: #9e9e9e; text-decoration: underline; } .footer-bottom p.copy { text-align: center; /*float: right; line-height: 11px; font-size: 11px; color: #5f6261;*/ } .footer-bottom p.copy span { padding: 0 11px; } .footer-bottom p.copy a { color: #18A58C; text-decoration: underline; } .footer-bottom p.copy a:hover { text-decoration: none; } .footer-bottom p.copy strong { font-weight: normal; } /* #Media Queries ================================================== */ /* tablet portrait */ @media only screen and ( min-width: 768px) and ( max-width: 980px ) { body { width: 768px; } .shell { width: 748px; } #navigation { background-size: 86%;} #navigation ul li a { /*padding: 0 22px;*/ } #navigation ul li.first a { /*padding-left: 26px;*/ } .slider-holder { position: relative; } .slider-holder span.slider-b { background: url(images/m-slider-bottom.png) no-repeat; width: 604px; height: 30.2px; position: absolute; bottom: -30.2px; left: 9.7%; z-index: 100;} .slider-holder span.slider-shadow { background: transparent; display: none; } .flex-control-nav { left: 346px; } .slider { width: 604px; height: 302px; position: relative; background: url(images/main-bg.jpg) no-repeat 0 0;} .slider ul.slides { list-style: none; list-style-position: outside; } .slider ul.slides li { width: 604px !important; height: 302px; float: left; position: relative; } .slider ul.slides li .img-holder { width: 604px; height: 302px; position: absolute; bottom: 0px; right: 0px; } .slider ul.slides li .img-holder img { width: 604px !important; height: 302px !important; } .slider ul.slides li .slide-cnt { width: 320px; padding: 0px 0 0 34px; } .slider ul.slides li .box-cnt { width: 285px; } .slider ul.slides li .slide-cnt h2 { font-size: 40px; line-height: 40px; padding-bottom: 16px; color: #fff; text-shadow: rgba(0,0,0,0.4) 0px 1px 2px; font-family: 'DroidSans', sans-serif; font-weight: 700; } .main { padding: 47px 0 0 0; } .main .post p { padding: 1% 25% 30px 5%; } .main section {/* background: url(images/main-bg.jpg) no-repeat center bottom; padding-left: 20px; padding-right: 20px; */ } .main .cols { margin: 0 0 0 0; padding-left: 30px; padding-right: 22px; } .main .cols .col { width: 188px; } .main .cols .col img { float: none; display: block; margin: 0 auto; } .main .cols .col + .col { padding-left: 66px; } .main .cols .col-cnt {text-align: center; } .main .post-cnt { float: none; display: block; width: 100%; } .main .post #back-areas { width: 720px; height: 600px; background: url(images/eidetica/bg-Eidetica-t.png) no-repeat; /*padding: -10%;*/ /*margin: 0;*/ } .main .post .imagem-holder { padding-left: 5.5%; padding-top: 2%; } .main .post .imagem-holder a img { width: 80%; height: 80%; } .main .postServicos .fotoServicos { width: 435px; height: 245px; float: none; display: block; margin-right: 0px; margin-bottom: 20px; } .main .post-cnt-servicos { float: none; display: block; width: 100%; } .main .testimonial .complements {} #brindes { clear: both; } .main section .endSection { clear: both; background: url(images/section.png) no-repeat center bottom; } .main .testimonial { background: transparent; } .main .post { /*background: url(images/section.png) no-repeat center bottom; padding-left: 20px ;*/ } /*t-section-post.png*/ /*.main .post .video-holder { width: 435px; height: 245px; float: none; display: block; margin-right: 0px; margin-bottom: 20px; }*/ .main .post-cnt { } .image-portfolio img { width: 100%; /*height: 100%;*/} .socials-inner { padding-left: 70px; } .footer-bottom { height: 58px; } .footer-cols { padding-left: 40px; } .footer-cols .col { width: 150px; } .footer-cols .col + .col { padding-left: 28px; } .footer-cols .col ul li { font-size: 12px; } #us-footer {float: right; width:86%; height:86%; background: url(images/us-footer.png) no-repeat; } .footer-bottom .footer-nav { float: none; display: block; text-align: center; padding-bottom: 18px; } .footer-bottom p.copy { float: none; display: block; text-align: center; } } /* smartphone */ @media only screen and ( max-width: 767px) { body { width: auto; } .shell { width: 320px; margin: 0 auto; } #header { position: relative; z-index: 1000; padding-left: 0; padding-right: 0; padding-top: 5px; } #logo { float: none; display: block; margin: 0 auto; padding: 0 0 0 0; } .socialzone { display: none; } .socials { background-image: none; } #navigation { padding: 0 0 0 0; height: 36px; background: #f7f2ec url('images/nav_bg.png'); border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; } #navigation a.nav-btn { display: block; font-size: 13px; line-height: 36px; padding-top: 0px; height: 28px; padding-left: 22px; text-transform: uppercase; color: #18A68D; font-size: 13px; font-family: 'DroidSans', sans-serif; font-weight: 700; } #navigation a.nav-btn:hover { text-decoration: none; } #navigation a.nav-btn span.arr { background: url(images/nav-arr.png) no-repeat 0 0; width: 13px; height: 9px; position: absolute; right: 14px; top: 12px; } #navigation a.nav-btn span.arr.active { background: url(images/nav-arr.png) no-repeat 0 bottom; } #navigation { position: relative; z-index: 1000; } #navigation ul { display: none; position: absolute; top: 36px; left: 0; width: 100%; background: #f7f2ec url('images/nav_bg.png'); border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; } #navigation ul li { /*display: block;*/ line-height: 36px !important; float: none; font-size: 13px; } #navigation ul li a { padding: 0 22px; } #navigation ul li.first a { padding-left: 26px; display: none; } #nav-where { padding: 4% 0 0 0;} .m-slider { background: #f3f3f3; } .slider-holder { position: relative; margin: 0 auto; width: 310px; padding-left: 0; } .slider-holder span.slider-b {background: url(images/t-slider-bottom.png) no-repeat; width: 310px; height: 15.5px; position: absolute; bottom: -15.5px; left: 0; z-index: 100;} .slider-holder span.slider-shadow { background: transparent; display: none; } .flex-control-nav { left: 130px; } .slider { width: 310px; height: 155px; overflow: hidden; position: relative; background: url(images/main-bg.jpg) no-repeat 0 0;} .slider ul.slides li { width: 310px !important; height: 155px !important; float: none; } .slider ul.slides li .img-holder { width: 310px !important; height: 155px !important; /*bottom: -10px !important; left: 50%; margin-left: -145px;*/ } .slider ul.slides li .img-holder img { width: 310px !important; height: 155px !important; } .slider ul.slides li .slide-cnt { width: 300px; margin: 0 auto; padding: 0px 0 0 0px; } .slider ul.slides li .box-cnt { display: none; } .slider ul.slides li .slide-cnt h2 { font-size: 22px; text-align: center; line-height: 25px; padding-bottom: 16px; color: #fff; text-shadow: rgba(0,0,0,0.4) 0px 1px 2px; font-family: 'DroidSans', sans-serif; font-weight: 700; } .slider ul.slides li .slide-cnt a.grey-btn { display: none; } .main { padding: 40px 0 0 0; } .main .post p { padding: 1% 25% 30px 5%; } .main section {/*m-section-shadow.png*/ /*background: url(images/section.png) no-repeat center bottom; padding: 0 20px 20px 20px;*/ } .main section .endSection { background-image: none; } .main .cols { padding-left: 0; margin: 0 0 0 0; } .main .cols .col { width: 188px; float: none; display: block; padding-bottom: 60px; margin: 0 auto; } .main .cols .col img { float: none; display: block; margin: 0 auto; } .main .cols .col + .col { padding-left: 0px; } .main .cols .col-cnt { text-align: center; float: none; display: block; } .main .cols .col-cnt h2 {font-size: 0; line-height: 15px;} .main .post {/*m-section-post.png*/ /*background: url(images/section.png) no-repeat center bottom; padding-top: 28px; padding-left: 20px;*/ } /*.main .post .video-holder { width: 280px; height: 162px; float: none; display: block; margin: 0 auto 20px; }*/ /*.main .post .video-holder img { width: 280px; height: 162px; }*/ .main .post-cnt { float: none; display: block; width: 100%; } .main .post-cnt p { display: block; padding-bottom: 12px; } /*.main .post-cnt p strong { display: block; padding-bottom: 12px; }*/ .main .post-cnt { } .main .post #back-areas { width: auto; height: auto; background: url(images/main-bg.jpg) no-repeat; padding: 0; margin: 0; } .main .post .imagem-holder { padding-left: 0; padding-top: 0; } .main .post .imagem-holder a img { padding-left: 22%; margin: 0; } #nothing { width: 0; height: 0; } .image-portfolio img { width: 100%; /*height: 100%;*/} .main .testimonial .complements { clear:both; width: 100%; padding: 0; } .main .postServicos { background: url(images/m-section-post.png) no-repeat center bottom; padding-top: 28px; padding-left: 20px; } .main .postServicos .fotoServicos { width: 280px; height: 162px; float: none; display: block; margin: 0 auto 20px; } .main .postServicos .fotoServicos img { width: 280px; height: 162px; } .main .post-cnt-servicos { float: none; display: block; width: 100%; } .main .post-cnt-servicos p strong { display: block; padding-bottom: 12px; } .testimonial h2 { font-size: 21px; } .testimonial p.author { text-align: center; } .socials { } .socials a { float:right; padding-right: 1%; position: relative; } #footer h2 { padding-bottom: 12px; } .footer-cols { padding-left: 10px; padding-right: 0; padding-bottom: 0; } .footer-cols .col { width: 150px; float: none; display: block; padding-bottom: 22px; } .footer-cols .col + .col { padding-left: 0px; } .footer-cols .col ul li { font-size: 14px; } #us-footer {background-position: 0 0} #logo-footer { display: none; } .footer-bottom { height: 58px; } .footer-bottom { padding: 10px 9px 20px; height: 100%; } .footer-bottom .footer-nav { float: none; display: block; text-align: center; padding: 0 0px 18px; } .footer-bottom .footer-nav ul li { padding: 0 4px; border: 0; font-size: 10px !important; } .footer-bottom p.copy { float: none; display: block; text-align: center; } .footer-bottom p.copy strong { display: block; padding-top: 10px; } .footer-bottom p.copy span { display: none; } } @media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi) { #navigation a.nav-btn span.arr { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; } #navigation a.nav-btn span.arr.active { background: url(images/nav-arr@2x.png) no-repeat 0 bottom; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; } #logo a { background: url(images/logo@2x.png) no-repeat 0 0; -webkit-background-size: 81px 33px; -moz-background-size: 81px 33px; background-size: 81px 33px; } } /* ******************************************************************************************************************************** */ /* **StyleClientes.css****************************************************************************************************************************** */ /* ******************************************************************************************************************************** */ .main .Clientes { padding-left: 9%; padding-right: 0; } .main .Clientes .colClientes { margin-bottom: 5%; width: 150px; float: left; } .main .Clientes .colClientes + .colClientes { padding-left: 1.7%; } .main .Clientes .colClientes a {display:inline-block; width: 150px; height: 150px; } #abrangas { background: url(images/clientes/abrangas.png) no-repeat left top; } #abrangas:hover { background-position: 50% top; } #abrangas:active { background-position: 100% top; } #abranlogica { background:url(images/clientes/abranlogica.png) no-repeat left top; } #abranlogica:hover { background-position: 50% top; } #abranlogica:active { background-position: 100% top; } #anaLuzia { background:url(images/clientes/anaLuzia.png) no-repeat left top; } #anaLuzia:hover { background-position: 50% top; } #anaLuzia:active { background-position: 100% top; } #atelierDaHorta { background:url(images/clientes/atelierDaHorta.png) no-repeat left top; } #atelierDaHorta:hover { background-position: 50% top; } #atelierDaHorta:active { background-position: 100% top; } #cartorioNotarial { background:url(images/clientes/cartorioNotarial.png) no-repeat left top; } #cartorioNotarial:hover { background-position: 50% top; } #cartorioNotarial:active { background-position: 100% top; } #cenfop { background:url(images/clientes/cenfop.png) no-repeat left top; } #cenfop:hover { background-position: 50% top; } #cenfop:active { background-position: 100% top; } #epdra { background:url(images/clientes/epdra.png) no-repeat left top; } #epdra:hover { background-position: 50% top; } #epdra:active { background-position: 100% top; } #friofontes { background:url(images/clientes/friofontes.png) no-repeat left top; } #friofontes:hover { background-position: 50% top; } #friofontes:active { background-position: 100% top; } #gabineteEstetica { background:url(images/clientes/gabineteEstetica.png) no-repeat left top; } #gabineteEstetica:hover { background-position: 50% top; } #gabineteEstetica:active { background-position: 100% top; } #gomesSoledade { background:url(images/clientes/gomesSoledade.png) no-repeat left top; } #gomesSoledade:hover { background-position: 50% top; } #gomesSoledade:active { background-position: 100% top; } #gsp { background:url(images/clientes/gsp.png) no-repeat left top; } #gsp:hover { background-position: 50% top; } #gsp:active { background-position: 100% top; } #gualterAgrochao { background:url(images/clientes/gualterAgrochao.png) no-repeat left top; } #gualterAgrochao:hover { background-position: 50% top; } #gualterAgrochao:active { background-position: 100% top; } #hotelSegredos { background:url(images/clientes/hotelSegredos.png) no-repeat left top; } #hotelSegredos:hover { background-position: 50% top; } #hotelSegredos:active { background-position: 100% top; } #improveConsult { background:url(images/clientes/improveConsult.png) no-repeat left top; } #improveConsult:hover { background-position: 50% top; } #improveConsult:active { background-position: 100% top; } #irmoesLemos { background:url(images/clientes/irmoesLemos.png) no-repeat left top; } #irmoesLemos:hover { background-position: 50% top; } #irmoesLemos:active { background-position: 100% top; } #ledcom { background:url(images/clientes/ledcom.png) no-repeat left top; } #ledcom:hover { background-position: 50% top; } #ledcom:active { background-position: 100% top; } #nelsonCarvalho { background:url(images/clientes/nelsonCarvalho.png) no-repeat left top; } #nelsonCarvalho:hover { background-position: 50% top; } #nelsonCarvalho:active { background-position: 100% top; } #ozEnergia { background:url(images/clientes/ozEnergia.png) no-repeat left top; } #ozEnergia:hover { background-position: 50% top; } #ozEnergia:active { background-position: 100% top; } #restauranteCentralPark { background:url(images/clientes/restauranteCentralPark.png) no-repeat left top; } #restauranteCentralPark:hover { background-position: 50% top; } #restauranteCentralPark:active { background-position: 100% top; } #restauranteCristina { background:url(images/clientes/restauranteCristina.png) no-repeat left top; } #restauranteCristina:hover { background-position: 50% top; } #restauranteCristina:active { background-position: 100% top; } #SegredosDeAldeia { background:url(images/clientes/SegredosDeAldeia.png) no-repeat left top; } #SegredosDeAldeia:hover { background-position: 50% top; } #SegredosDeAldeia:active { background-position: 100% top; } #solicitadoraElisaBourgard { background:url(images/clientes/solicitadoraElisaBourgard.png) no-repeat left top; } #solicitadoraElisaBourgard:hover { background-position: 50% top; } #solicitadoraElisaBourgard:active { background-position: 100% top; } #TagusValley { background:url(images/clientes/TagusValley.png) no-repeat left top; } #TagusValley:hover { background-position: 50% top; } #TagusValley:active { background-position: 100% top; } #telescrita { background:url(images/clientes/telescrita.png) no-repeat left top; } #telescrita:hover { background-position: 50% top; } #telescrita:active { background-position: 100% top; } #tuiNaShiatsu { background:url(images/clientes/tuiNaShiatsu.png) no-repeat left top; } #tuiNaShiatsu:hover { background-position: 50% top; } #tuiNaShiatsu:active { background-position: 100% top; } /* #Media Queries ================================================== */ /* tablet portrait */ @media only screen and ( min-width: 768px) and ( max-width: 980px ) { .main .Clientes { padding-left: 8.5%; padding-right: 0; } .main .Clientes .colClientes { margin-bottom: 5%; width: 150px; float: left; } .main .Clientes .colClientes + .colClientes { padding-left: 1%; } .main .Clientes .colClientes a { display:inline-block; } } /* smartphone */ @media only screen and ( max-width: 767px) { .main .Clientes { padding-left: 25%; } .main .Clientes .colClientes { margin-bottom: 5%; } .main .Clientes .colClientes + .colClientes { padding-left: 0; } .main .Clientes .colClientes a { display:inline-block; clear: both; } } /* ******************************************************************************************************************************** */ /* **StyleForm.css****************************************************************************************************************************** */ /* ******************************************************************************************************************************** */ form { background: #f7f2ec url('images/letter_bg.png'); height: auto; width: 400px; margin: 0px auto; padding: 20px; border: 1px solid #fff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; -moz-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 14px #fff; -webkit-box-shadow: 0px 0px 3px #9d9d9d, inset 0px 0px 27px #fff; } .formbox, .formbox2 { color: #777777;background:none;width: 380px; height: 36px; padding: 0px 10px; margin: 0 0 10px 0; border:1px solid #f8f5f1; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow: inset 0px 0px 1px #726959; -webkit-box-shadow: inset 0px 0px 1px #b3a895; box-shadow: inset 0px 0px 1px #b3a895; } .labelbox { clear: both; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 400; font-size: 20px; color: #555555; text-shadow: 0 1px 0 #fff; /*display: block;*/ /*float: left;*/ /*color: #484d55;*/ /*display: none;*/ } .formbox {/*width: 60%;*/} .formbox2 {/* min-width: 60em;*/ min-height: 12em; clear: both; } .formbox, .formbox2 /*form textarea*/ { font-size: 14px; font-family: 'DroidSans', sans-serif; font-weight: 400; /*float: left;*/ /*overflow: auto;*/ -webkit-appearance: none; } .formular { /*width: 90%; padding: 0 15% 0 12%;*/ } form text:focus, form select:focus, form textarea:focus, form input:focus { background:rgba(255,255,255,.35); } form text:hover, form email:hover, form tel:hover, form select:hover,form textarea:hover {} textarea { /*height: 80px; padding-top:14px; */} form .formerize-placeholder{ color: #CCCCCC !important; font-style: italic; } form ::-webkit-input-placeholder { color: #CCCCCC !important; font-style: italic; } form :-moz-placeholder { color: #CCCCCC !important; font-style: italic;} form ::-moz-placeholder { color: #CCCCCC !important; font-style: italic; } form :-ms-input-placeholder { color: #CCCCCC !important; font-style: italic; } form :-moz-focus-inner { border: 0; } .formular .formtext { clear: both; padding: 5% 2% 5% 2%; }*/ form div.itemform { float: left; width: 50%; padding: 1% 0 1% 0;} .checkbox { /*clear: both;*/ /*display: inline;*//* padding-left: 0;*/ /*display: block;*/ /*width: 20px;*/} input[type="checkbox"] { display:none; } input[type="checkbox"] + label { /*color:#f2f2f2;*/ /*font-family:Arial, sans-serif;*/ /*font-size:14px;*/ } input[type="checkbox"] + label span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(images/check_radio_sheet.png) left top no-repeat; cursor:pointer; } input[type="checkbox"]:checked + label span { background:url(images/check_radio_sheet.png) -19px top no-repeat; } .button { display: inline-block; background: #444; text-align: center; text-transform: uppercase; font-weight: 700; letter-spacing: 0.25em; text-decoration: none; border-radius: 0.35em; border: 0; outline: 0; cursor: pointer; -moz-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .button-style1 { background: #e97770; color: #fff; } .button-style1:hover { background-color: #f98780; } .button-style1:active { background-color: #d96760; } .button-style2 { background: none; color: #606167; box-shadow: inset 0px 0px 2px 0px #a0a1a7; } .button-style2:hover { box-shadow: inset 0px 0px 2px 0px #606167; } .button-style2:active { box-shadow: inset 0px 0px 2px 0px #202127; } [required] { border: 2px dotted orange; } :required {border: 2px dotted orange; } form {} form label { margin: 0.25em 0 0.25em 0; } .button { padding: 0 2.25em 0 2.25em; font-size: 0.9em; min-width: 12em; height: 4em; line-height: 4em; } .button-big { font-size: 1em; min-width: 14em; } .actions { margin: 3em 0 0 0; } form .actions { margin-top: 1em; } .actions li { display: inline-block; margin: 0 0.75em 0 0.75em; } .actions li:first-child { margin-left: 0; } .actions li:last-child { margin-right: 0; } .actions-centered { text-align: center; } .feature-list { margin-top: 5%;} #title { font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 3em; color: #e97770; text-align: center; padding-bottom: 5%; } .formular h3 { color: #e97770 !important; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 400; font-size: 3em; text-align: center; padding: 10px 0 20px 50px; } .feature-list p { color: #666666; padding: 0 20px 20px 20px; margin-left: 30px; } .feature-list p a { text-decoration: none; color: #666666; } .feature-list p a:hover { text-decoration: none; color: #333333; } .feature-list p a:visited { text-decoration: none; color: #666666; } .feature-list .icon { float:left; width: 40px; height: 40px; background: url(images/icon-contacts.png) no-repeat; } .feature-list .row { width: 800px; height: 150px; margin-left: 12%; } .feature-list .row .rowZon { float: left; margin-left: 10%; width: 300px; } #icon-home { background-position: 0 top; } #icon-comment { background-position: 33.333333% top; } #icon-envelope { background-position: 66.666666% top; } #icon-phone { background-position: 100% top; } /* #Media Queries ================================================== */ /* tablet portrait */ @media only screen and ( min-width: 768px) and ( max-width: 980px ) { .feature-list .row { width: 600px; height: 150px; margin-left: 15%; } .feature-list .row .rowZon { float: left; margin-left: 0; width: 300px; } #title { padding-bottom: 10%; } .formular h3 { font-size: 2.5em; } } /* smartphone */ @media only screen and ( max-width: 767px) { form {width:auto; font-size: 11px; padding: 5px; } .formbox, .formbox2 { font-size: 12px; } .formbox {width: 90%; } .formbox2 {width: 90%; } .feature-list p { padding-bottom: 30px; } .feature-list .row { width: 0; height: 0; margin-left: 15%; } .feature-list .row .rowZon { clear: both; margin-left: 0; width: 300px; } #title { font-size: 2em; margin-bottom: 20%; } .formular h3 { font-size: 2em; } }