/* Define o tamanho da fonte raiz para o elemento */ html main { font-size: 16px; /* Defina o tamanho da fonte raiz para 1rem */ } /* Estilos para títulos h1 a h6 */ main h1, main h2, main h3, main h4, main h5, main h6 { font-weight: bold; line-height: 1; position: relative; } main h1 { font-size: 3.5rem; } main h2 { font-size: 4rem; } main h1 span, main h2 span { display: block; font-size: 1.2rem; } main h3 { font-size: 3rem; } main h3 span { display: block; font-size: 1rem; } main p { font-size: 1.2rem; } main a { font-size: 1rem; } /* Styles css personalizados a partir daqui */ .height-100 { height: 100%; } .btn-ver-mais-informacao { height: 50px; width: 50px; background: white; position: absolute; bottom: 20px; right: 20px; border-radius: 50%; display: flex; align-items: center; z-index: 2; transition: 0.5s; } .btn-ver-mais-informacao.dark { background: #3B3756; } .btn-ver-mais-informacao.active { transform: rotate(45deg); transition: 0.5s; z-index: 5; } .btn-ver-mais-informacao img, .btn-ver-mais-informacao svg { height: 40px; display: flex; margin: 0 auto; width: 40px; } .box-ver-mais-informacao { position: absolute; top: 10%; left: 0; padding: 40px; background: white; height: 100%; opacity: 0; transition: 0.5s; z-index: -1; } .btn-ver-mais-informacao:active+.box-ver-mais-informacao { opacity: 1; z-index: -1; } .btn-ver-mais-informacao.active+.box-ver-mais-informacao { top: 0; left: 0; z-index: 4; overflow: auto; } .video_como-trabalhamos { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .video_como-trabalhamos video { width: 100%; height: auto; left: 0; top: 50%; right: 50%; transform: translate(-0%, -50%); position: absolute; } .need-fix-height.home-page-section { min-height: 500px; } img.meio-logo { position: absolute; z-index: 1; right: -5px; top: -5px; } img.onborading-cupcode { position: absolute; left: 0; height: 130%; bottom: 0; } .carrousel-como-trabalhamos { padding-top: 20px; } .dots-hidden{ display: none; } .carrousel-conteudo-como-trabalhamos { padding: 20px; min-height: 380px; display: flex; flex-direction: column; justify-content: space-between; } .carrousel-conteudo-como-trabalhamos img { max-width: 150px; margin: 0 auto; } .carrousel-conteudo-como-trabalhamos p { font-size: 15px; margin: 0; max-height: 115px; overflow: auto; } img.preparar-para-decolar { height: 400px; margin: 0 auto; display: flex; transform: scale(1.2); } img.envelope-3d { max-width: 200px !important; } img.entrando-em-orbita { max-width: 300px; margin: 0 auto; display: flex; transform: scale(1.5); } img.entregas-mensais { transform: scale(1.2); bottom: 10px; } img.quadro-rosa-3d { max-width: 300px; margin: 0 auto; display: flex; transform: scale(1.3); } img.transforme-realidade { max-width: 500px; } img.foguete-dourado { max-width: 150px; position: absolute; left: 0; top: 0; } img.trans-cafe-digital { max-width: 200px; } img.sirene-emergencia-cupcode { transform: unset; height: 300px; } img.emergencia-luz-azul { position: absolute; transform: unset; right: 0; height: 117%; top: -60px; z-index: 2; } img.emergencia-luz-vermelha { position: absolute; left: 0; top: -140px; z-index: 2; } .modal-keynote-criativos .modal-dialog { max-width: 65%; } /* Pulse: Esta animação faz o elemento crescer e encolher suavemente, dando a sensação de pulsar. */ @keyframes opacityBlue { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .opacityBlue { animation: opacityBlue 0.5s infinite; } @keyframes opacityRed { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .opacityRed { animation: opacityRed 0.8s infinite; } .lista-imagem-informacao li { display: flex; gap: 20px; } .lista-imagem-informacao img { width: auto; height: auto; max-width: 120px; max-height: 120px; } ol ol, ol ul, ul ol, ul ul { padding: 0; } .marquee-container { width: 115%; background-color: yellow; overflow: hidden; white-space: nowrap; position: absolute; top: 50%; z-index: 2; box-shadow: 0px 0px 20px; transform: rotate(340deg); } .marquee-content span { font-size: 28px; } .marquee-content { display: inline-grid; animation: marquee 400s linear infinite; } @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } img.img-planet { max-width: 350px; margin: 0 auto; display: flex; transform: scale(1.3); } .marquee-content img { height: 35px; position: relative; top: -3px; transform: unset !important; opacity: unset !important; } .fabrica-de-ideias h3 { font-size: 2.9rem; } .btn-cafe-digital img { max-width: 150px; } .btn-cafe-digital { max-width: 410px; } .btn-cafe-digital a { display: flex; align-items: center; text-decoration: none; } .slick-list { margin-right: unset; } .dp-md-block { display: none; } img.e-agora-astronauta { height: 250px !important; width: auto; } .head-box-ver-mais, .box-com-img-left { display: flex; gap: 10px; align-items: center; } .head-box-ver-mais img, .box-com-img-left img, .box-com-img-top img, .box-com-img-right img { width: 80px; height: auto; } .box-com-img-left p, .box-com-img-top p, .box-com-img-right p { font-size: 15px; margin: 0; } .box-com-img-top { text-align: center; gap: 10px; display: flex; flex-direction: column; align-items: center; } .box-com-img-right { display: flex; flex-direction: row-reverse; gap: 10px; align-items: center; text-align: end; } .tchau-email { height: 150px !important; width: auto !important; } img.tchau-astronauta { height: 70px; width: auto; } img.astronauta-com-mackbook { width: 150px; margin: 0 auto; display: flex; } img.astronauta-suave { height: 200px !important; } .btn-plus-popup-modal { position: absolute; width: 50px; height: 50px; border-radius: 50%; background: white; bottom: 20px; right: 20px; display: flex; align-items: center; z-index: 2; } .btn-plus-popup-modal img { height: 40px; width: 40px; display: flex; margin: 0 auto; } .btn-ver-mais-informacao.popup-modal { transform: rotate(0deg); } div#modalQuintou, div#modalDiasdeTrabalho { top: 100%; transition: 0.5s; } div#modalQuintou.show, div#modalDiasdeTrabalho.show { top: 0; transition: 0.5s; } img.popup-img-top-right { position: absolute; top: -2px; right: 0; width: 200px; } .popup-texto-left { display: flex; align-items: center; gap: 15px; text-align: start; } .popup-texto-right { display: flex; align-items: center; gap: 15px; text-align: right; flex-direction: row-reverse; } .popup-texto-left img, .popup-texto-right img { height: auto; width: auto; max-height: 180px; } .modal-body-ver-mais button { position: absolute; right: 15px; bottom: 15px; border-radius: 50%; border: unset; background: white; width: 50px; height: 50px; cursor: pointer; } .modal-body-ver-mais button img { width: 40px; height: 40px; transform: rotate(45deg); } img.img-cupcode-quintou { width: 300px; top: 25px; right: 25px; } .modal-universal .modal-dialog { max-width: 80%; margin: 0 auto; margin-top: 5%; } @media (max-width: 1250px) { main h3 { font-size: 2.5rem; } main h1, main h2 { font-size: 3rem; } .meia-box-email h3, .meia-box-etapa h3 { font-size: 2.1rem !important; } .fabrica-de-ideias h3 { font-size: 2.2rem; } } @media (max-width: 992px) { .modal-keynote-criativos .modal-dialog { max-width: 95%; } .video_como-trabalhamos video { width: 130%; } img.meio-logo { right: -170px; } main h1, main h2 { font-size: 2.5rem; } main h3, .fabrica-de-ideias h3 { font-size: 1.9rem; } main p { font-size: 1rem; } img.img-planet { transform: scale(1.2); } main a { font-size: 0.8rem; } .meia-box-email h3, .meia-box-etapa h3 { font-size: 1.8rem !important; } .dn-m { display: none; } img.entregas-mensais { transform: scale(1.1); bottom: 0; } .btn-cafe-digital h4 { font-size: 22px; } img.img-cupcode-quintou { width: 220px; } } @media (max-width: 850px) { .video_como-trabalhamos video { width: 150%; } img.meio-logo { right: -195px; } main h3 span, main p, .meia-box-etapa ul li { font-size: 0.9rem; } main h3, .fabrica-de-ideias h3, .meia-box-email h3, .meia-box-etapa h3 { font-size: 1.6rem; } img.entrando-em-orbita { max-width: 100%; transform: unset; } img.emergencia-luz-azul { right: -180px; } img.emergencia-luz-vermelha { left: -150px; top: -50px; } img.img-cupcode-quintou { width: 200px; } } @media (max-width: 768px) { .lista-imagem-informacao li { flex-direction: column; } .home-page-section { min-height: unset; } img.meio-logo { right: -120px; height: 102%; } .dp-sm-none { display: none; } .dp-md-block { display: flex; } main h1, main h2 { font-size: 3rem; } img.onborading-cupcode { position: relative; left: -63px; height: 400px; bottom: 0; transform: scale(1.3); } img.preparar-para-decolar { height: 300px; } img.entrando-em-orbita { max-width: 250px; transform: scale(1.3); } img.ovni-abduzindo-foguete-3d { max-width: 300px; margin: auto; } img.img-como-trabalhamos { max-width: 300px; margin: 0 auto; display: flex; } main h3, .fabrica-de-ideias h3, .meia-box-email h3, .meia-box-etapa h3, .meia-box-email h3, .meia-box-etapa h3 { font-size: 2.5rem; } ul.lista-imagem-informacao { padding: 0; margin-top: 30px !important; } img.img-cupcode-quintou { width: 150px; } .btn-ver-mais-informacao, .btn-plus-popup-modal, .modal-body-ver-mais button { width: 40px; height: 40px; bottom: 15px; right: 15px; } .btn-ver-mais-informacao img, .btn-plus-popup-modal img, .modal-body-ver-mais button img { width: 30px; height: 30px; } } @media (max-width: 680.85px) { .popup-texto-right, .popup-texto-left { display: block; text-align: center; } } @media (max-width: 620px) { img.meio-logo, .home-page-section br { display: none; } .h6, h6 { font-size: 0.8rem; } .carrousel-conteudo-como-trabalhamos p { font-size: 12px; } main h3, .fabrica-de-ideias h3, .meia-box-email h3, .meia-box-etapa h3, .meia-box-email h3, .meia-box-etapa h3 { font-size: 2.3rem; } img.preparar-para-decolar { top: 16px; position: relative; } img.astronauta-navegando { max-width: 150px; } img#imagem-destaque { left: -35px; } } @media (max-width: 568px) { .video_como-trabalhamos video { width: 100vh; } main h1, main h2 { font-size: 2.5rem; } main h3, .fabrica-de-ideias h3, .meia-box-email h3, .meia-box-etapa h3, .meia-box-email h3, .meia-box-etapa h3, .meia-box-email h3, .meia-box-etapa h3 { font-size: 1.6rem !important; } img.img-planet { transform: unset; max-width: 100%; } img.onborading-cupcode { left: -25px; height: 260px; } .box-ver-mais-informacao { padding: 20px; } .carrousel-conteudo-como-trabalhamos { min-height: 340px; } h4 { font-size: 1.2rem; } img.emergencia-luz-vermelha { left: -100px; top: 35px; } img.emergencia-luz-azul { right: -94px; } .lista-imagem-informacao img { width: 70px; } h5 { font-size: 1rem; } .h6, h6 { font-size: 1rem; } .carrousel-conteudo-como-trabalhamos p { max-height: 110px; } .hero-box a, .hero-box p, .box-texto-servicos p, .btns-servicos a { font-size: 12px; } .btn-cafe-digital h4 { font-size: 15px; } .btn-cafe-digital img { max-width: 115px; } .btn-cafe-digital { max-width: 310px; margin: 0 auto; margin-top: 10px; } img.img-cupcode-quintou { width: 120px; top: 10px; right: 10px; } .modal-universal h2 { font-size: 12px; } img#imagem-destaque { left: -30px; width: 60px !important; } .floating-button { padding: 5px 15px; font-size: 15px; } } @media (max-width: 420px) { .titulo-pasta-head { font-size: 8px; } .modal-universal .texto-descricao { font-size: 10px; } }