@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 } .formwhatts{position:fixed; bottom:90px; right:20px; z-index:9998;width:300px; background:#fff; display:none;} body { font-family: Arial, Helvetica, sans-serif !important } 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; line-height: 55px; display: block } 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: 1.3rem } h3.title2 { color: #008bbf; font-size: 1.5rem } h3.title2 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 } .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 } .grecaptcha-badge { display: none } .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; 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: #fff; color: #000; border-radius: inherit; margin-right: .0rem !important; font-family: "Titillium Web", sans-serif; font-weight: 400; font-style: normal; display: flex } #mobile-nav ul li a:hover { color: #fff; background-color: #008bbf !important; border-color: #008bbf } .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 } .nav-menu a { background-color: inherit; border-color: #fff; font-family: "Titillium Web-bold"; border: solid 0; border-radius: 0 } .nav-menu a:hover { background-color: rgb(7 99 139 / .5) } .header-scrolled .nav-menu a { background-color: inherit; color: #1d2e3d; 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 { background-color: #07638b; border-color: #07638b; color: #fff } .hero { display: table; width: 100%; height: 100vh; background-image: url(../imagens/banner/hero1.webp); background-position: top; background-repeat: no-repeat; background-size: cover } .hero .banner { text-align: left; position: absolute; bottom: 10% } .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) } .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-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 } .bordertop { border-top: solid 1px; border-top-color: #fff; border-top-style: dashed } .bordertop1 { border-top: solid 1px #fff; padding-top: 20px; border-top-style: dashed } .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 { color: #fff; font-size: .8rem } .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_c.svg); color: #363738; -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_c.svg); color: #363738; -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 } .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 { color: #fff; font-size: 1.6rem; line-height: 30px; margin-top: 25px } .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 } .contato { padding-top: 80px } .botao { position: fixed; bottom: 70px; 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) } .paralax { background-image: url(../imagens/bg_paralax.svg); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover } .coluna-img { background-image: url(../imagens/banner/manutencao-de-microscopios1.webp); background-blend-mode: multiply; background-position: center bottom; 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-monocular1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos02 { background-image: url(../imagens/modelos/microscopio-binocular1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos03 { background-image: url(../imagens/modelos/microscopio-trinocular1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos04 { background-image: url(../imagens/modelos/microscopio-metalografico1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos05 { background-image: url(../imagens/modelos/microscopio-cirurgico1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos06 { background-image: url(../imagens/modelos/microscopio-invertido1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos07 { background-image: url(../imagens/modelos/microscopio-fluorescencia1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos08 { background-image: url(../imagens/modelos/microscopio-petrografico1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos09 { background-position-y: -10px; background-image: url(../imagens/modelos/microscopio-multipla-cabecas1.webp); padding-top: 8rem; padding-bottom: 1rem } .modelos10 { background-position-y: -70px; background-image: url(../imagens/modelos/microscopio-estereo1.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" } @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 } } @media (max-width:991px) { .copyright p { text-align: center } .redes-sociais { text-align: center } .logo-rod { text-align: center } .contato { text-align: center; border-top: solid 1px; border-top-style: dashed; padding-top: 0 } .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 } }