@charset "utf-8"; @font-face { font-family: "Titillium-Web"; src: url(Titillium_Web/TitilliumWeb-Regular.eot); src: url('Titillium_Web/TitilliumWeb-Regular.eot?#iefix') format('embedded-opentype'), url(Titillium_Web/TitilliumWeb-Regular.woff2) format('woff2'), url(Titillium_Web/TitilliumWeb-Regular.woff) format('woff'), url(Titillium_Web/TitilliumWeb-Regular.ttf) format('truetype'), url('Titillium_Web/TitilliumWeb-Regular.svg#TitilliumWeb-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap } @font-face { font-family: "Titillium Web-bold"; src: url(Titillium_Web/TitilliumWeb-Bold.eot); src: url('Titillium_Web/TitilliumWeb-Bold.eot?#iefix') format('embedded-opentype'), url(Titillium_Web/TitilliumWeb-Bold.woff2) format('woff2'), url(Titillium_Web/TitilliumWeb-Bold.woff) format('woff'), url(Titillium_Web/TitilliumWeb-Bold.ttf) format('truetype'), url('Titillium_Web/TitilliumWeb-Bold.svg#TitilliumWeb-Bold') format('svg'); font-weight: 700; font-style: normal; font-display: swap } body { font-family: Arial, Helvetica, sans-serif !important } .formwhatts { position: fixed; bottom: 90px; right: 20px; z-index: 9998; width: 300px; background: #fff; display: none; } body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } img { pointer-events: none; } body.mobile-nav-active #mobile-nav { left: 0 } ::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-thumb { -webkit-border-radius: 0; border-radius: 0; background: rgb(109 110 113 / .9) } h1, h2, h3 { font-family: "Titillium-Web" } h2.title { color: #008bbf; font-size: 3rem; line-height: 40px } h2.title small { color: #000; font-size: 1.5rem; display: block; line-height: 55px } h2.title .quebra-small { display: contents; line-height: 10px } h2.title1 { color: #fff; font-size: 3rem; line-height: 40px } h2.title1 small { color: #fff; font-size: 1.5rem; display: block } h2.title-rod small { color: #fff; font-size: 1rem; display: block } h3.title1 { color: #fff; font-size: 2rem } h3.title1 small { color: #fff; font-size: 1rem; display: block } h3.title2 { color: #008bbf; font-size: 1.5rem } h3.title2 small { color: #000; font-size: .9rem; display: block } h3.title3 { color: #07638b; font-size: 1.4rem } h3.title3 small { color: #000; font-size: .9rem; display: block } h3.title-beneficios { font-size: 1.8rem; color: #008bbf } h3.title-beneficios small { color: #000 } .bg-teratec1 { background-color: #008bbf } .bg-teratec2 { background-color: #07638b } .bg-teratec3 { background-color: #6d6e71 } .bg-teratec4 { background-color: #1d2e3d } .bg-teratec5 { background-color: #e1e2e2 } .bg-teratec6 { background: rgb(0 0 0 / .5) } .bg-teratec7 { background-color: #f7f8f9; position: relative; z-index: 1 } .color-teratec1 { color: #008bbf } .color-teratec2 { color: #07638b } .color-teratec3 { color: #6d6e71 } .color-teratec4 { color: #1d2e3d } .color-teratec5 { color: #e1e2e2 } .btn-primary { background-color: #07638b; border-color: #07638b; font-size: .9rem; border-radius: 0 } .btn-primary:hover { background-color: #008bbf; border-color: #008bbf } .bt-insta-top { background-image: url(../imagens/logo_instagram_b.svg); background-repeat: no-repeat; padding-left: 25px; padding-bottom: 25px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-insta-top:hover { background-image: url(../imagens/logo_instagram.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-face-top { background-image: url(../imagens/logo_facebook_b.svg); background-repeat: no-repeat; padding-left: 25px; padding-bottom: 25px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-face-top:hover { background-image: url(../imagens/logo_facebook.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-linkedin-top { background-image: url(../imagens/logo_linkedin_b.svg); background-repeat: no-repeat; padding-left: 25px; padding-bottom: 25px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-linkedin-top:hover { background-image: url(../imagens/logo_linkedin.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-youtube-top { background-image: url(../imagens/logo-youtube_b.svg); background-repeat: no-repeat; padding-left: 25px; padding-bottom: 25px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-youtube-top:hover { background-image: url(../imagens/logo-youtube.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-phone-top { font-family: "Titillium-Web"; background-image: url(../imagens/ico_phone_b.svg); background-repeat: no-repeat; background-position-y: 3px; background-size: 10%; font-size: 1.1rem; padding-left: 35px; padding-bottom: 25px; margin-right: 0; text-decoration: none; color: #fff } .bt-mail-top { font-family: "Titillium-Web"; background-image: url(../imagens/ico_mail.svg); background-repeat: no-repeat; background-position-y: 3px; background-size: 10%; padding-left: 25px; padding-bottom: 0; margin-right: 0; text-decoration: none; color: #fff } .bt-insta-bot { background-image: url(../imagens/logo_instagram_b.svg); background-repeat: no-repeat; padding-left: 37px; padding-top: 37px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-insta-bot:hover { background-image: url(../imagens/logo_instagram_p.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-face-bot { background-image: url(../imagens/logo_facebook_b.svg); background-repeat: no-repeat; padding-left: 37px; padding-top: 37px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-face-bot:hover { background-image: url(../imagens/logo_facebook_p.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-linkedin-bot { background-image: url(../imagens/logo_linkedin_b.svg); background-repeat: no-repeat; padding-left: 37px; padding-top: 37px; ; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-linkedin-bot:hover { background-image: url(../imagens/logo_linkedin_p.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-youtube-bot { background-image: url(../imagens/logo-youtube_b.svg); background-repeat: no-repeat; padding-left: 37px; padding-top: 37px; margin-right: 15px; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .bt-youtube-bot:hover { background-image: url(../imagens/logo-youtube_p.svg); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } .logo-color { display: none } .back-to-top { position: fixed; z-index: 1; background: #6d6e71; border-color: #fff; width: 44px; height: 44px; left: 15px; bottom: 80px; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px } .back-to-top:hover { background-color: rgb(0 0 0 / .5); border-color: #fff; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px } #header { position: absolute; left: 0; top: 0; right: 0; transition: all 0.5s; z-index: 997 } #header.header-scrolled .logo-branco { display: none } #header.header-scrolled .logo-color { display: block } #header.header-scrolled { background: #fff; transition: all 0.5s; border-bottom: 3px solid #1a698e; top: -39px; position: fixed } #mobile-nav-toggle { position: absolute; right: 0; z-index: 999; border: solid 0; top: 0; margin: 27px 10px 0 0; background: none; display: none; transition: all 0.4s; cursor: pointer; background-image: url(../imagens/menu.svg); background-repeat: no-repeat; background-size: contain; padding-left: 50px; padding-top: 50px; width: 50px; height: 50px } .header-scrolled #mobile-nav-toggle { background-image: url(../imagens/menu_a.svg) } #mobile-nav-toggle.fa-menu { background-image: url(../imagens/menu_x.svg) !important; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s } #mobile-body-overly { width: 100%; height: 100%; z-index: 997; top: 0; left: 0; position: fixed; background: rgb(0 0 0 / .4); display: none } #mobile-nav { position: fixed; padding-top: 18px; bottom: 0; z-index: 998; top: 0; left: -260px; width: 260px; overflow-y: auto; background-color: #07638b; transition: 0.4s } #mobile-nav ul { padding: 0; margin: 0; list-style: none } #mobile-nav ul li a { background-color: #07638b; color: #fff !important; border-radius: inherit; border-bottom: solid 1px; border-bottom-color: #ffffff; margin-right: .0 !important; font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; display: flex; align-items: center; background-image: none; } #mobile-nav ul li a:hover { color: #fff !important; background-color: #07638b !important; border-color: #07638b } .icon-menumobile { display: none } #nav-menu-container { float: right; margin: 0 } .nav-menu > li { float: left; list-style: none; margin-top: 15px; margin-left: 10px; position: relative } .nav-menu a { background-color: inherit; color: #fff; border-color: #fff; font-family: "Titillium Web-bold"; border: solid 0; border-radius: 0; border-bottom: 0px !important; } .nav-menu a:hover { color: #fff; filter: drop-shadow(0 0 6px rgb(255 255 255 / .4)); text-shadow: 0 0 6px rgb(255 255 255 / .4); } .nav-menu a.active, .nav-menu a.active img { color: #fff !important; filter: drop-shadow(0 0 6px rgb(255 255 255 / .4)); text-shadow: 0 0 6px rgb(255 255 255 / .4); background-image: none; } .nav-menu > li:hover div { background-color: rgb(7 99 139 / .5) } .header-scrolled .nav-menu > li:hover div { background-color: #07638b; border-color: #07638b; color: #fff } .nav-menu > li span { background-image: url(../imagens/arrow-menua.svg); background-position-y: 20px; background-position-x: 10px; background-repeat: no-repeat; background-size: 40% } .nav-menu > li ul { border-radius: 5px; position: absolute; display: none; text-align: left; box-shadow: 0 0 39px 0 rgb(0 0 0 / .12); transition: background .3s, border .3s, border-radius .3s, box-shadow .3s; --e-column-margin-right: 0; --e-column-margin-left: 0; background-color: #fff; margin-top: 10px; padding: 1.3rem } .nav-menu > li ul li { list-style: none; line-height: 35px } .nav-menu > li ul li a { color: #000000; background-color: #ffffff !important; font-family: "Titillium-Web" !important; padding: 10px 15px; line-height: 18px; text-decoration: none } .nav-menu > li ul li a:hover { color: #008bbf !important; background-color: #ffffff !important } .header-scrolled .nav-menu > li span { background-image: url(../imagens/arrow-menu.svg) } .header-scrolled .nav-menu > li:hover span { background-image: url(../imagens/arrow-menua.svg) } .header-scrolled .nav-menu > li:hover a { border-color: #07638b; color: #fff } #mobile-nav ul li div { background-color: #fff; color: #000; border-radius: inherit; margin-right: .0rem !important; font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; display: flex; border: solid 1px; border-color: #07638b !important } #mobile-nav ul li div:hover { color: #000; background-color: #ffffff !important; border-color: #008bbf } #mobile-nav ul li span { background-image: url(../imagens/arrow-menu.svg); padding: 15px; position: absolute; right: 10px; background-position-y: 5px; background-position-x: 10px; background-repeat: no-repeat; background-size: 40%; filter: brightness(0) invert(1); } #mobile-nav ul li .fa-chevron-up span { background-image: url(../imagens/arrow-menu.svg); transform: rotate(180deg); background-position-y: 13px; background-position-x: 8px } #mobile-nav ul li .fa-chevron-up { color: #ffffff; background-color: #07638b !important; border-color: #07638b; } #mobile-nav ul li .fa-chevron-up:before { content: "" !important; } #mobile-nav ul li ul li a { background-color: #008bbf !important; color: #ffffff !important; font-size: 1rem; text-decoration: none; padding-left: 25px !important; padding-top: 5px !important; padding-bottom: 5px !important; } .menu-has-children { background-color: inherit; border-color: #fff; font-family: "Titillium Web-bold"; border: solid 0; border-bottom: solid 1px !important; border-radius: 0; color: #fff; font-size: .9rem } .header-scrolled .menu-has-children { color: #000 } .header-scrolled .menu-has-children:hover { border-color: #07638b; color: #fff } .header-scrolled .menu-has-children:hover .svgwhite{ filter: brightness(0) invert(0) !important; } .header-scrolled .nav-menu a { background-color: inherit; color: #000000 !important; border-color: #008bbf; font-family: "Titillium Web-bold"; border: solid 0; border-bottom: solid 0px !important; border-radius: 0 } .header-scrolled .nav-menu a:hover { color: #07638b !important; } .header-scrolled .nav-menu > li { margin-top: 0px !important; } .hero { display: table; width: 100%; height: 100vh; background-position: top; background-repeat: no-repeat; background-size: cover } .hero-video { display: inherit; overflow: hidden; position: relative; z-index: 1 } .hero-video video { position: fixed; top: 0; left: 0; object-fit: cover; width: 100% } .video-layer-box { background: rgb(0 139 191 / .1); position: absolute; z-index: 0; top: 0 } .hero.home { background-image: url(../imagens/banner/hero-home.webp) } .hero.teratec { background-image: url(../imagens/banner/hero-teratec.webp) } .hero-parceiros { background-image: url(../imagens/banner/hero-parceiros.webp) } .hero-politica { background-image: url(../imagens/banner/hero-politica.webp) } .hero.microscopio { background-image: url(../imagens/banner/hero.webp) } .hero.calibracao { background-image: url(../imagens/banner/hero-calibracao.webp) } .hero-consultoria { background-image: url(../imagens/banner/hero-consultoria.webp) } .hero-produtos { background-image: url(../imagens/banner/hero-produtos.webp) } .hero-blog { background-image: url(../imagens/banner/hero-blog.webp) } .hero-contato { background-image: url(../imagens/banner/hero-contato.webp) } .hero-error404 { background-image: url(../imagens/banner/hero-error404.webp) } .hero-video { display: inherit; overflow: hidden; position: relative; z-index: 1 } .hero-video video { position: fixed; top: 0; left: 0; object-fit: cover; width: 100% } .hero .banner { text-align: left; position: absolute; bottom: 10% } .banner-produtos { background-image: url(https://www.teratecsp.com.br/assets/imagens/banner/produtos_microscopio.webp); position: relative; z-index: 1; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center } .coluna-img-micro1 { background-image: url(../imagens/banner/manutencao-de-micropipetas.webp); background-blend-mode: multiply; background-position: center bottom; background-repeat: no-repeat; background-size: cover } .ps-acordeon { padding-left: 34px } .nav-menu > li ul::after { content: ""; border-bottom: 12px solid #fff; border-left: 12px solid #fff0; border-right: 12px solid #fff0; position: absolute; top: -12px; left: 66.6% } .nav-menu > li ul.produtos::after { content: ""; border-bottom: 12px solid #fff; border-left: 12px solid #fff0; border-right: 12px solid #fff0; position: absolute; top: -12px; left: 76.5% } .menu-servico-ul { width: 890px; left: -565px; height: 260px; padding: 0.6rem 0rem 0.6rem 0.6rem !important; } .menu-servico-ul.produtos { width: 890px; left: -655px; height: 260px; padding: 0.6rem 0rem 0.6rem 0.6rem !important } .menu-servico-ul li { float: left !important; width: 219px; border: solid 0 } .menu-servico-ul li a { z-index: 10; position: relative; background-color: #f5f5f7 !important; padding: 0px 0px !important; } .menu-servico-ul li ul { display: block; background-color: transparent !important; box-shadow: none !important; margin-top: -10px; margin-left: -13px; font-size: 14px; position: relative; border: solid 0 } .menu-servico-ul li ul li { float: inherit !important; line-height: 16px; font-size: 12px } .menu-servico-preview { width: 210px; height: 140px; object-fit: cover; display: block; margin-bottom: 10px; } .linkPasseios{ color: #07638b !important; font-size: 1.4rem; text-align: left; } .linkPasseios span { color: #000; font-size: .9rem; display: block; width: 219px !important; padding: 0px !important; } .linkPasseios .descricao{ font-size:.85rem; line-height:1.4; color:#666; display: block; padding-top: 10px; } .menu-servico-preview{ transition: all .4s ease; } .linkPasseios:hover .menu-servico-preview{ filter: brightness(1.15); transform: scale(1.03); } .nav-menu a .svgwhite { filter: brightness(0) invert(1)!important; } .header-scrolled .nav-menu a .svgwhite { filter: brightness(0) invert(0)!important; } .header-scrolled .nav-menu > li:hover a .svgwhite{ filter: none !important; } @media (max-width:991px) { .coluna-img-micro { background-position-x: 0 !important } } .hero h1 small { font-size: 2rem; display: block } .hero h1 { font-size: 3rem; margin-bottom: 20px } .bt-hero { background-color: inherit; border-color: #fff; font-family: "Titillium-Web"; font-weight: 400; font-style: normal; border: solid 0; border-bottom: solid 2px !important; border-radius: 0 } .bt-hero:hover { background-color: rgb(7 99 139 / .5) } .bt-contato { background-color: inherit; border-color: #fff; font-family: "Titillium Web-bold"; border: solid 2px !important; border-radius: 0 } .bt-contato:hover { background-color: rgb(0 0 0 / .5) } footer { position: relative; z-index: 1 } .quadro-beneficios { box-shadow: 0 0 39px 0 rgb(0 0 0 / .12); transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; margin: -80px 0 0 0; --e-column-margin-right: 0px; --e-column-margin-left: 0px; background-color: #fff; padding: 20px 25px 25px 25px } .quadro-beneficios h2 { color: #008bbf; font-size: 2rem } .quadro-beneficios h2 small { color: #000; font-size: 1.2rem !important; display: block } .quadro-beneficios ul li { list-style-type: none; background-image: url(../imagens/ico_checked.svg); background-position-y: .6rem; background-repeat: no-repeat; background-size: 20px; padding-left: 30px; margin-left: -30px; border-bottom: solid 1px #6d6e71; border-bottom-style: dashed; padding-top: .5rem; padding-bottom: .5rem } .ico-precisao-wrapper { text-align: center; box-sizing: border-box } .ico-precisao-wrapper h3 { font-family: "Titillium Web-bold"; font-size: 1.2rem; margin-bottom: 0rem; color: #000 } .ico-precisao { padding: 30px; border-width: 1px 1px 1px 1px; color: #008bbf; position: relative; background-color: #fff0; transition: all .2s linear; display: inline-block; line-height: 1; text-align: center; box-sizing: border-box } .ico-precisao-wrapper:hover .ico-precisao { animation: spin 5s infinite linear .2s; border-radius: 50% } .ico-precisao:before { box-shadow: 0 0 0 10px rgb(0 139 191 / .1); border-color: rgb(0 139 191 / .5); position: absolute; content: ""; width: calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px; z-index: 1; border-width: 2px; border-style: dashed; transition: all .2s linear } .ico-precisao-wrapper:hover .ico-precisao:before { animation: spin 5s infinite linear .2s; border-radius: 50% } .ico-beneficios-wrapper { text-align: center; box-sizing: border-box } .ico-beneficios-wrapper h3 { font-family: "Titillium Web-bold"; font-size: 1.2rem; margin-bottom: 0rem; color: #008bbf } .ico-beneficios-wrapper p { font-size: .8rem } .ico-beneficios { font-family: "Titillium Web-bold"; font-size: 25px; padding: 20px; border-width: 1px 1px 1px 1px; color: #008bbf; position: relative; border: 0 solid #008bbf; background-color: #fff0; transition: all .2s linear; display: inline-block; line-height: 1; text-align: center; box-sizing: border-box } .ico-beneficios-wrapper:hover .ico-beneficios { animation: spin 5s infinite linear .2s; border-radius: 50% } .ico-beneficios:before { box-shadow: 0 0 0 10px rgb(0 139 191 / .1); border-color: rgb(0 139 191 / .5); position: absolute; content: ""; width: calc(100% - 20px); height: calc(100% - 20px); left: 10px; top: 10px; z-index: 1; border-width: 2px; border-style: dashed; transition: all .2s linear } .ico-beneficios-wrapper:hover .ico-beneficios:before { animation: spin 5s infinite linear .2s; border-radius: 50% } .ico-beneficios i { width: 1.2em; margin-left: -5px; height: 1.1em; transform: rotate(0deg); position: relative; display: block; box-sizing: border-box } .MultiCarousel1.detalhes { float: left; overflow: hidden; width: 100%; position: relative } .MultiCarousel1.detalhes .MultiCarousel-inner1 { transition: 1s ease all; float: left } .MultiCarousel1.detalhes .MultiCarousel-inner1 .item1 { float: left } .MultiCarousel1.detalhes .MultiCarousel-inner1 .item1 > div { position: relative; z-index: 99; text-align: center; padding: 1px; filter: grayscale(100%); cursor: pointer; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .MultiCarousel1.detalhes .MultiCarousel-inner1 .item1 > div:hover { filter: grayscale(0%); transform: scale(1.2); z-index: 999; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .MultiCarousel1.detalhes .leftLst1, .MultiCarousel1 .rightLst1 { top: calc(50% - 20px); background: #07638b; border-color: #fff; width: 35px; height: 35px; bottom: 80px; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px } .MultiCarousel1.detalhes .leftLst1:hover, .MultiCarousel1 .rightLst1:hover { border-color: #fff; background: #008bbf; background-image: url(../imagens/top-arrow.svg); width: 35px; height: 35px; background-position-y: -2px } .MultiCarousel1.detalhes .leftLst1 { left: 0; transform: rotate(270deg); margin-right: 5px; margin-left: 5px } .MultiCarousel1.detalhes .rightLst1 { right: 0; transform: rotate(90deg); margin-left: 5px } .MultiCarousel1.detalhes .leftLst1.over, .MultiCarousel1 .rightLst1.over { pointer-events: none; background: #ccc; background-image: url(../imagens/top-arrow.svg); width: 35px; height: 35px; background-position-y: -2px } .MultiCarousel1.marcas { float: left; overflow: hidden; padding: 15px; width: 100%; position: relative } .MultiCarousel1.marcas .MultiCarousel-inner1 { transition: 1s ease all; float: left } .MultiCarousel1.marcas .MultiCarousel-inner1 .item1 { float: left } .MultiCarousel1.marcas .MultiCarousel-inner1 .item1 > div { text-align: center; padding: 5px; margin: 15px 5px; ; background: #fff; color: #666; box-shadow: 1px 1px 4px } .MultiCarousel1.marcas .leftLst1, .MultiCarousel1 .rightLst1 { top: calc(50% - 20px); background: #07638b; border-color: #fff; width: 35px; height: 35px; bottom: 80px; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px } .MultiCarousel1.marcas .leftLst1:hover, .MultiCarousel1 .rightLst1:hover { border-color: #fff; background: #008bbf; background-image: url(../imagens/top-arrow.svg); width: 35px; height: 35px; background-position-y: -2px } .MultiCarousel1.marcas .leftLst1 { left: 0; transform: rotate(270deg); margin-right: 5px } .MultiCarousel1.marcas .rightLst1 { right: 0; transform: rotate(90deg); margin-left: 5px } .MultiCarousel1.marcas .leftLst1.over, .MultiCarousel1 .rightLst1.over { pointer-events: none; background: #ccc; background-image: url(../imagens/top-arrow.svg); width: 35px; height: 35px; background-position-y: -2px } .equi-labo { margin-left: 1rem } .copyright { margin-top: 30px !important } .copyright p { font-size: .9rem; font-family: "Titillium-Web"; color: #fff } .bordertop2 { border-top: solid 2px; border-top-color: #fff; padding-top: 20px } .bordertop3 { border-top: solid 3px; border-top-color: #fff; padding-top: 20px } .contato p { font-size: .8rem; color: #fff } .contato .telrod { font-family: "Titillium Web-bold"; font-size: 1.2rem; background-image: url(../imagens/ico_phone_b.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 35px; padding-left: 30px; text-decoration: none; color: #fff; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .contato .telrod:hover { background-image: url(../imagens/ico_phone_p.svg); color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .contato .mailrod { font-family: "Titillium Web-bold"; font-size: 1rem; background-image: url(../imagens/ico_mail.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 30px; padding-left: 30px; padding-top: 2px; text-decoration: none; color: #fff; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .contato .mailrod:hover { background-image: url(../imagens/ico_mail_p.svg); color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .contato .locrod { font-family: "Titillium Web-bold"; font-size: 1rem; background-image: url(../imagens/ico_locb.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 30px; padding-left: 30px; padding-top: 2px; text-decoration: none; color: #fff; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .contato .locrod:hover { background-image: url(../imagens/ico_loc.svg); color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .menu-rod ul { margin-left: -30px } .menu-rod ul li { list-style: none } .menu-rod ul li a { font-family: "Titillium-Web"; color: #fff; text-decoration: none; font-size: .8rem; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .menu-rod ul li a:hover { color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .menu-rod ul li span { font-family: "Titillium-Web"; color: #fff; text-decoration: none; font-size: .8rem } .bt-mail-top { font-family: "Titillium Web"; background-image: url(../imagens/ico_mail.svg); background-repeat: no-repeat; background-position-y: 3px; background-size: 10%; padding-left: 25px; padding-bottom: 0; margin-right: 0; text-decoration: none; color: #fff } .title-rod { font-size: 1.6rem; line-height: 25px; color: #fff } .redes-sociais { margin-top: 60px !important; margin-bottom: 60px; text-align: right } .textarea { resize: none } .form-control { border-radius: 0px !important } .img-negative { margin-top: -25px } .animation { animation: alerta 1.5s infinite } .botao { position: fixed; z-index: 1; bottom: 30px; right: 15px; background: #25d366; padding-top: 5px; padding-left: 2px; border: 2px solid #25d366; border-radius: 70px; box-shadow: 0 0 0 0 rgb(0 139 191 / .5); text-align: center; width: 55px; height: 55px; transition: background, padding 500ms ease-in-out; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s } .botao:hover { background: #6d6e71; border: 2px solid #fff } .bg-teratec-ico { background-image: url(../imagens/icon_teratecba.svg); background-position: top left; background-size: 440px; ; background-position-y: -100px; background-repeat: no-repeat } .bg-teratec-ico h3 { margin-top: 80px; padding-left: 90px; color: #fff; font-size: 1.6rem } .bg-teratec-ico h3 small { color: #fff; font-size: 1rem; display: block } .bg-teratec-ico1 { background-image: url(../imagens/icon_teratecba.svg); background-position: top left; background-size: 260px; background-position-x: -40px; background-position-y: -25px; background-repeat: no-repeat } .bg-teratec-ico1 h3 { margin-top: 73px; padding-left: 10px; color: #fff; font-size: 1.5rem } .bg-teratec-ico1 h3 small { color: #fff; font-size: 1rem; display: block } .borderboton-colunas-1 { border-bottom: solid 1px; border-color: #6d6e71; border-bottom-style: dashed } .borderright-colunas-1 { border-right: solid 1px; border-color: #6d6e71; border-right-style: dashed } .modelos .row > * { padding-right: calc(var(--bs-gutter-x)* .1); padding-left: calc(var(--bs-gutter-x)* .1) } .modelos { position: relative; z-index: 1 } .paralax { background-image: url(../imagens/bg_paralax.svg); position: relative; z-index: 1; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover } .produtos { z-index: 1; position: relative } .wrap-box { overflow: hidden; position: relative; height: 350px } .layer-box { position: absolute; bottom: 0; left: 0; width: 100%; height: 350px; background: linear-gradient(to bottom, transparent, rgb(0 0 0 / .8)) } .wrap-box .div-img-wrap-box { background-position: center bottom; background-repeat: no-repeat; background-size: cover; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .wrap-box:hover .div-img-wrap-box { transform: scale(1.2); -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .wrap-box .div-content-wrap-box { position: absolute; bottom: 0; z-index: 1 } .coluna-home-miroscopio { background-image: url(../imagens/banner/hero.webp) } .coluna-home-micropipeta { background-image: url(../imagens/banner/hero-calibracao.webp) } .coluna-home-consultoria { background-image: url(../imagens/banner/hero-consultoria.webp) } .coluna-home-assistencia { background-image: url(../imagens/banner/hero-parceiros.webp) } .coluna-img { background-image: url(../imagens/banner/manutencao-de-microscopios.webp); background-blend-mode: multiply; background-position: center bottom; background-repeat: no-repeat; background-size: cover } .coluna-img-micro { background-image: url(../imagens/banner/manutencao-de-micropipetas.webp); background-blend-mode: multiply; background-position: center bottom; background-position-x: -640px; background-repeat: no-repeat; background-size: cover } .accordion { background-color: #fff0; background-image: url(../imagens/ico_checked.svg); background-repeat: no-repeat; padding-left: 50px !important; background-size: 35px; background-position-y: 5px; background-position-x: 5px; font-size: 1.2rem; padding: 5px; width: 100%; border: none; text-align: left; transition: max-height 0.4s ease-out } .active, .accordion:hover { background-image: url(../imagens/ico_checkedb.svg); background-repeat: no-repeat; background-size: 35px; background-position-y: 5px; background-position-x: 5px; color: #008bbf; transition: max-height 0.4s ease-out } .active, .accordion:hover:after { color: #008bbf; transition: max-height 0.4s ease-out } .accordion:after { color: #000; float: right; margin-left: 5px; font-family: "Titillium Web"; font-size: 1.8rem } .active:after { color: #008bbf } .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out } .modelos h3 { font-size: 1.3rem } .modelos h3 small { display: block; font-size: .9rem } .blocomodelos { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1); background-blend-mode: multiply; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s; border: solid 2px #6d6e71; border-color: #fff } .blocomodelos:hover { transform: scale(1.2); z-index: 9; background-color: #008bbf; filter: grayscale(0%) } .modelos01 { background-image: url(../imagens/modelos/microscopio-monocular.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos02 { background-image: url(../imagens/modelos/microscopio-binocular.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos03 { background-image: url(../imagens/modelos/microscopio-trinocular.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos04 { background-image: url(../imagens/modelos/microscopio-metalografico.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos05 { background-image: url(../imagens/modelos/microscopio-cirurgico.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos06 { background-image: url(../imagens/modelos/microscopio-invertido.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos07 { background-image: url(../imagens/modelos/microscopio-fluorescencia.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos08 { background-image: url(../imagens/modelos/microscopio-petrografico.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos09 { background-position-y: -10px; background-image: url(../imagens/modelos/microscopio-multipla-cabecas.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos10 { background-image: url(../imagens/modelos/microscopio-estereo.webp); padding-top: 8rem; padding-bottom: 1rem } .modelo-micro01 { background-image: url(../imagens/modelos/micropipeta-volume-fixo.webp); padding-top: 8rem; padding-bottom: 1rem } .modelo-micro02 { background-image: url(../imagens/modelos/micropipeta-volume-variavel.webp); padding-top: 8rem; padding-bottom: 1rem } .modelo-micro03 { background-image: url(../imagens/modelos/micropipeta-monocanal.webp); padding-top: 8rem; padding-bottom: 1rem } .modelo-micro04 { background-image: url(../imagens/modelos/micropipeta-multicanal.webp); padding-top: 8rem; padding-bottom: 1rem } .modelo-micro05 { background-image: url(../imagens/modelos/micropipeta-eletronica.webp); padding-top: 8rem; padding-bottom: 1rem } .modal { position: fixed; z-index: 999; width: 100%; height: 100%; background: rgb(0 0 0 / .78); display: none; flex-direction: column; justify-content: center; align-items: center } .modal-popup { position: relative; z-index: 999; background-color: #f2f2f2; border: solid 2px #fff; background-position: top center; width: 92vmin; max-width: 800px; min-width: 310px; text-align: center; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .btn-fechar { position: absolute; top: -10px; right: -10px } .stage-vc { position: fixed; z-index: 999; width: 100%; height: 100%; background: rgb(0 0 0 / .78); display: flex; flex-direction: column; justify-content: center; align-items: center } .modal-desc { min-height: 14%; background-color: rgb(0 0 0 / .6); position: absolute; bottom: 8px; left: 8px; right: 8px; text-align: left; border-top: solid 1px; border-color: #fff; border-top-style: dashed } .bt-modalnextprev { position: absolute; right: 0; top: 78%; width: 120px } .next-vc { background: #07638b; border-color: #fff; width: 35px; height: 35px; bottom: 80px; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px; cursor: pointer; transform: rotate(90deg) } .next-vc:hover { border-color: #fff } .previous-vc { background: #07638b; border-color: #fff; width: 35px; height: 35px; bottom: 80px; background-image: url(../imagens/top-arrow.svg); background-position-y: -2px; transform: rotate(270deg) } .previous-vc:hover { border-color: #fff } .modal-desc h3 { font-size: 1.2rem; font-family: "Titillium Web-bold" } .telcontato { font-family: "Titillium Web-bold"; font-size: 1.2rem; background-image: url(../imagens/ico_phone_p.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 35px; padding-left: 30px; text-decoration: none; color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .telcontato:hover { background-image: url(../imagens/ico_phone.svg); color: #008bbf } .mailcontato { font-family: "Titillium Web-bold"; font-size: 1rem; background-image: url(../imagens/ico_mail_p.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 30px; padding-left: 30px; padding-top: 2px; text-decoration: none; color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .mailcontato:hover { background-image: url(../imagens/ico_maila.svg); color: #008bbf } .loccontato { font-family: "Titillium Web-bold"; font-size: 1rem; background-image: url(../imagens/ico_loc.svg); background-repeat: no-repeat; background-position-y: 5px; background-size: 10%; padding-bottom: 30px; padding-left: 30px; padding-top: 2px; text-decoration: none; color: #000; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .loccontato:hover { background-image: url(../imagens/ico_loca.svg); color: #008bbf } .linhatitulo:after { left: 0; content: ""; bottom: 0; height: 2px; width: 30px; background-color: #008bbf; display: block } .grecaptcha-badge { display: none } .widget-wrap { background-color: #f7f8f9; padding: 1rem; margin-bottom: 1rem } .widget-wrap h4 { color: #008bbf; font-size: 1.5rem; font-family: "Titillium-Web" } .widget-wrap ul li a { color: #000; text-decoration: none } .widget-wrap ul li a small { color: #000; text-decoration: none; font-size: 1rem } .widget-wrap ul li:hover a { color: #008bbf } .widget-wrap ul li:hover a small { color: #008bbf } .widget-wrap ul li { list-style-type: none; background-image: url(https://www.teratecsp.com.br/assets/imagens/ico_checked.svg); background-position-y: .6rem; background-repeat: no-repeat; background-size: 20px; padding-left: 30px; margin-left: -30px; border-bottom: solid 1px #6d6e71; border-bottom-style: dashed; padding-top: .5rem; padding-bottom: .5rem } .widget-wrap ul li:last-child { border-bottom: solid 0 #6d6e71 } .widget-wrap ul li:hover { list-style-type: none; background-image: url(https://www.teratecsp.com.br/assets/imagens/ico_checkedb.svg) } .pagination .current { background-color: #f5f5f5 !important; border: 1px solid #f5f5f5 !important; color: #000000 !important } .pagination .page-numbers { padding: 8px 14px; border: 1px solid #f5f5f5; color: #000; text-decoration: none; margin: 0 5px 0 0; display: inline-block; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .pagination .page-numbers.dots { background-color: #f5f5f5 !important; border: 1px solid #f5f5f5 !important; color: #000000 !important } .pagination .page-numbers:hover { background-color: #008bbf; border-color: #008bbf; color: #fff; -webkit-transition: background 1s; -moz-transition: background 1s; -o-transition: background 1s; transition: background 1s; transition: 1s } .coluna-img-micro { mix-blend-mode: multiply } .filter-gray { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%) } @keyframes alerta { 0% { transform: scale() } 70% { transform: scale(); box-shadow: 0 0 0 50px #fff0 } 100% { transform: scale(); box-shadow: 0 0 0 0 #fff0 } 0% { transform1: scale() } 70% { transform1: scale(); box-shadow: 0 0 0 50px #fff0 } 100% { transform1: scale(); box-shadow: 0 0 0 0 #fff0 } } @media (max-width:1400px) { .bg-teratec-ico { background-size: 400px; background-position-y: -80px; background-position-x: -20px } .bg-teratec-ico h3 { padding-left: 50px !important; font-size: 1.5rem } .bg-teratec-ico1 h3 { font-size: 1.3rem !important } } @media (max-width:1200px) { #mobile-nav-toggle { display: inline } #nav-menu-container { display: none } .icon-menumobile { display: inline } .topo { display: none } #header.header-scrolled { top: 0px !important } .equi-labo { margin-left: 0rem !important; margin-top: 1rem !important } .bt-insta-top { padding-left: 40px; padding-bottom: 40px; margin-right: 15px } .bt-face-top { padding-left: 40px; padding-bottom: 40px; margin-right: 15px } .bt-linkedin-top { padding-left: 40px; padding-bottom: 40px; margin-right: 15px } .bt-youtube-top { padding-left: 40px; padding-bottom: 40px; margin-right: 15px } .bt-phone-top { font-size: 1.3rem; background-position-y: 5px; padding-left: 30px; padding-bottom: 30px; font-family: "Titillium Web-bold"; line-height: 2.5 } .bt-mail-top { font-family: "Titillium Web-bold"; font-style: normal; padding-left: 31px } .borderboton-colunas-2 { border-bottom: solid 1px; border-bottom-style: dashed } .borderright-colunas-1 { border-right: solid 0 } .borderright-colunas-2 { border-right: solid 1px; border-color: #6d6e71; border-right-style: dashed } .bg-teratec-ico { background-size: 380px; background-position-y: -80px; background-position-x: 0 } .bg-teratec-ico h3 { margin-top: 70px; padding-left: 70px !important; font-size: 2rem } .menu-servico-ul { height: inherit; width: inherit; padding: inherit !important; } .menu-servico-ul.produtos { padding: inherit !important; width: inherit; left: inherit; } .menu-servico-ul li { float: inherit !important; width: inherit !important } .menu-servico-ul li ul { display: none } .menu-servico-preview { display: none } .bt-servico { display: none } .linkPasseios span { color: inherit; display: contents; font-size: inherit } #mobile-nav ul li a img{ margin-right: 10px; filter: brightness(0) invert(1) !important; } .linkPasseios .descricao { display: none; } } @media (max-width:991px) { .copyright p { text-align: center } .redes-sociais { text-align: center } .logo-rod { text-align: center } .nonemd { display: none } .contato { margin-top: -2rem; text-align: center } .form { text-align: center } .paralax { background-attachment: inherit; background-repeat: inherit; background-position-y: 80px; background-size: 130% } .bg-teratec-ico { background-size: 380px; background-position-y: -80px; background-position-x: -40px } .bg-teratec-ico h3 { padding-left: 30px !important; font-size: 1.6rem } .bg-teratec-ico1 { background-size: 380px; background-position-y: -80px; background-position-x: -40px; min-height: 210px } .bg-teratec-ico1 h3 { padding-left: 30px !important; font-size: 1.6rem } } @media (max-width:767px) { .hero .banner { text-align: left; position: absolute; bottom: 2% } h2.title { font-size: 2.5rem } h2.title1 { font-size: 2.5rem } .borderboton-colunas-3 { border-bottom: solid 1px; border-bottom-style: dashed } .borderright-colunas-2 { border-right: solid 0 } .botao { bottom: 20px } .blocoatuacao:hover { transform: scale(1) } h2.title .quebra-small { display: block } .blocomodelos:hover { transform: scale(1) } .bg-teratec-ico-size40 { background-size: inherit } .bg-teratec-ico-size30 { background-size: inherit } .blocoatuacao { min-height: inherit } .detalhes .ps-5 { padding-left: 1.5rem !important } .bg-teratec-ico { background-size: 293px; background-position-y: -70px; background-position-x: -30px } .bg-teratec-ico h3 { margin-top: 40px; margin-bottom: 50px; padding-left: 20px !important; font-size: 1.7rem } .bg-teratec-ico1 { background-size: 293px; background-position-y: -70px; background-position-x: -30px; min-height: inherit } .bg-teratec-ico1 h3 { margin-top: 40px; margin-bottom: 50px; padding-left: 20px !important; font-size: 1.7rem !important } .MultiCarousel1.detalhes { text-align: center } .accordion { background-color: transparent !important; color: #000000 !important; padding-left: 35px !important; background-size: 25px; background-position-y: 8px; background-position-x: 5px } .active, .accordion:hover { background-image: url(../imagens/ico_checkedb.svg); color: #008bbf !important; background-size: 25px; background-position-y: 8px; background-position-x: 5px; transition: max-height 0.4s ease-out } .modal-desc { position: static } .bt-modalnextprev { top: 60%; width: 120px } .modelos09 { background-position-y: 0 } .modelos10 { background-position-y: 0 } h3.title-beneficios small { display: block } }