.button, h1, h2 { letter-spacing: 0 } h1, h2 { margin-bottom: 16px } .has-bottom-divider::after, .has-top-divider::before { position: absolute; left: 0; display: block; height: 1px; background: #242830; width: 100%; content: '' } .has-bottom-divider, .has-top-divider, .hero-copy, .hero-figure { position: relative } .body-wrap, .hero-figure-box-01, .hero-figure-box-02, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-08, .hero-figure-box-09, .tab { overflow: hidden } body { color: #8a94a7; font-size: 1rem } .hero-paragraph, a, button, p { font-family: "IBM Plex Sans", sans-serif } .text-sm, html { line-height: 30px; text-align: justify } a { font-family: "IBM Plex Sans", sans-serif !important font-weight: 400; color: #039be5; text-decoration: none; -webkit-tap-highlight-color: transparent } .hero-paragraph { color: #8a94a7; text-align: justify; margin-bottom: 30px } button { font-size: 100%; line-height: 1.15; margin: 0 } .lista-icones-redacao { display: grid; grid-gap: 5px; box-sizing: border-box; height: auto; margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(20%, 1fr)); padding: 10px } .lista-icones-grupo-redacao { width: 100%; color: #fff; border-radius: 5px; margin-bottom: 5px; text-align: center; padding: 0; background-color: var(--blue-color-one) } .button, .tab button.active, .tab button:hover { background-color: #e84040 } .lista-icones-texto h3 { font-size: 1em; font-weight: 400 !important } .lista-icones-texto { padding: 5px } h1, h2, h3, h4, h5, h6 { clear: both; color: #fff; font-weight: 600 } h1 { line-height: 48px } h2 { font-size: 32px; line-height: 42px } h4, h5, h6 { font-size: 20px; line-height: 30px; letter-spacing: -.1px; margin-bottom: 20px !important; margin-top: 24px } .tab button, p { font-size: 1em } .button, .header-links a:not(.button) { font-weight: 600; text-transform: uppercase; line-height: 16px } p { margin-top: 0; font-family: "IBM Plex Sans", sans-serif !important } b, strong { font-weight: 600 } .container-2, .container-sm, .container_ { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px } @media (min-width:481px) { .container-2, .container-sm, .container_ { padding-left: 24px; padding-right: 24px } } .container_ { max-width: 1128px* } .container-2 { padding-left: 120px } .container-sm { max-width: 848px } .container_ .container-sm { max-width: 800px; padding-left: 0; padding-right: 0 } .list-reset { list-style: none; padding: 0 } .text-left { text-align: left } .button, .hero, .text-center { text-align: center } .text-right { text-align: right } .text-primary { color: #0270d7 } .has-top-divider::before { top: 0 } .has-bottom-divider::after { bottom: 0 } .m-0 { margin: 0 } .mt-0 { margin-top: 0 } .has-animations .anime-element, .sr .has-animations .is-revealing { visibility: hidden } .anime-ready .has-animations .anime-element { visibility: visible } .button { display: inline-flex; font-size: 14px; text-decoration: none !important; color: #fff !important; border: none; border-radius: 2px; cursor: pointer; justify-content: center; padding: 16px 32px; height: 48px; white-space: nowrap } .button:hover { background: #262a33 } .button:active { outline: 0 } .button::before { border-radius: 2px } .button-sm { padding: 8px 24px; height: 32px } .button-primary { background: #097dea; background: linear-gradient(65deg, #0270d7 0, #0f8afd 100%) } .button-primary:hover { background: #0982f4; background: linear-gradient(65deg, #0275e1 0, #198ffd 100%) } .button-block { display: flex; display: flex; width: 100% } .site-header { padding: 24px 0 } .site-header-inner { position: relative; display: flex; justify-content: space-between; align-items: center } .header-links, .header-links li { display: inline-flex } .header-links a:not(.button) { font-size: 16px; letter-spacing: -.1px; color: #8a94a7; text-decoration: none; padding: 8px 24px } .hero { padding-top: 48px; padding-bottom: 88px } .hero-copy { z-index: 1 } .hero-cta { margin-bottom: 40px } .hero-figure svg { width: 100%; height: auto } .hero-figure::after, .hero-figure::before { content: ''; position: absolute; background-repeat: no-repeat; background-size: 100% } .has-animations .hero-figure::after, .has-animations .hero-figure::before { opacity: 0; transition: opacity 2s } .anime-ready .has-animations .hero-figure::after, .anime-ready .has-animations .hero-figure::before { opacity: 1 } .hero-figure::before { top: -57.8%; left: -1.3%; width: 152.84%; height: 178.78%; background-image: url("../images/hero-back-illustration.svg") } .hero-figure::after { top: -35.6%; left: 99.6%; width: 57.2%; height: 87.88%; background-image: url("../images/hero-top-illustration.svg") } .hero-figure-box { position: absolute; top: 0; will-change: transform } .hero-figure-box-01::before, .hero-figure-box-02::before, .hero-figure-box-03::before, .hero-figure-box-04::before, .hero-figure-box-08::before, .hero-figure-box-09::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100% } .hero-figure-box-01 { left: 103.2%; top: 41.9%; width: 28.03%; height: 37.37%; background: linear-gradient(to left top, #00bffb, rgba(0, 191, 251, 0)); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg) } .hero-figure-box-01::before, .hero-figure-box-03::before { background: linear-gradient(to left, #15181d 0, rgba(21, 24, 29, 0) 60%); -webkit-transform: rotateZ(45deg) scale(1.5); transform: rotateZ(45deg) scale(1.5) } .hero-figure-box-02 { left: 61.3%; top: 64.1%; width: 37.87%; height: 50.5%; background: linear-gradient(to left top, #0270d7, rgba(2, 112, 215, 0)); -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg) } .hero-figure-box-02::before { background: linear-gradient(to top, #15181d 0, rgba(21, 24, 29, 0) 60%); -webkit-transform: rotateZ(-45deg) scale(1.5); transform: rotateZ(-45deg) scale(1.5) } .hero-figure-box-03 { left: 87.7%; top: -56.8%; width: 56.81%; height: 75.75%; background: linear-gradient(to left top, #00bffb, rgba(0, 191, 251, 0)) } .hero-figure-box-04 { left: 54.9%; top: -8%; width: 45.45%; height: 60.6%; background: linear-gradient(to left top, #0270d7, rgba(2, 112, 215, 0)); -webkit-transform: rotateZ(-135deg); transform: rotateZ(-135deg) } .hero-figure-box-04::before { background: linear-gradient(to top, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, 0) 60%); -webkit-transform: rotateZ(-45deg) scale(1.5); transform: rotateZ(-45deg) scale(1.5) } .hero-figure-box-05, .hero-figure-box-06, .hero-figure-box-07 { background-color: #242830; box-shadow: -20px 32px 64px rgba(0, 0, 0, .25) } .hero-figure-box-05 { left: 17.4%; top: 13.3%; width: 64%; height: 73.7%; -webkit-transform: perspective(500px) rotateY(-15deg) rotateX(8deg) rotateZ(-1deg); transform: perspective(500px) rotateY(-15deg) rotateX(8deg) rotateZ(-1deg) } .hero-figure-box-06 { left: 65.5%; top: 6.3%; width: 30.3%; height: 40.4%; -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg) } .hero-figure-box-07 { left: 1.9%; top: 42.4%; width: 12.12%; height: 16.16%; -webkit-transform: rotateZ(20deg); transform: rotateZ(20deg) } .hero-figure-box-08 { left: 27.1%; top: 81.6%; width: 19.51%; height: 26.01%; background: #0270d7; -webkit-transform: rotateZ(-22deg); transform: rotateZ(-22deg) } .hero-figure-box-08::before { background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .48) 100%); -webkit-transform: rotateZ(45deg) scale(1.5); transform: rotateZ(45deg) scale(1.5) } .hero-figure-box-09 { left: 42.6%; top: -17.9%; width: 6.63%; height: 8.83%; background: #00bffb; -webkit-transform: rotateZ(-52deg); transform: rotateZ(-52deg) } .hero-figure-box-09::before { background: linear-gradient(to left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .64) 100%); -webkit-transform: rotateZ(45deg) scale(1.5); transform: rotateZ(45deg) scale(1.5) } .hero-figure-box-10 { left: -3.8%; top: 4.3%; width: 3.03%; height: 4.04%; background: rgba(0, 191, 251, .32); -webkit-transform: rotateZ(-50deg); transform: rotateZ(-50deg) } @media (max-width:640px) { .h1-mobile, .h2-mobile, .h3-mobile { letter-spacing: 0 } .h1-mobile { font-size: 38px; line-height: 48px } .h2-mobile { font-size: 32px; line-height: 42px } .h3-mobile { font-size: 24px; line-height: 34px } .h4-mobile, .h5-mobile, .h6-mobile { font-size: 20px; line-height: 30px; letter-spacing: -.1px } .hero-cta { max-width: 280px; margin-left: auto; margin-right: auto } .hero-cta .button { display: flex } .hero-cta .button + .button { margin-top: 16px } .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-09, .hero-figure::after { display: none } } .features-wrap { display: flex; flex-wrap: wrap; justify-content: space-evenly; margin-right: -32px; margin-left: -32px } .features-wrap:first-of-type { margin-top: -16px } .features-wrap:last-of-type { margin-bottom: -16px } .feature { padding: 0 !important; width: 380px; max-width: 380px; flex-grow: 1 } .feature-inner { height: 100% } .feature-icon { display: flex; justify-content: center } .is-boxed { background: #242830 } .body-wrap { background: #1d2026; display: flex; flex-direction: column; min-height: 100vh } .tab, mark { background-color: #096ee9 } .boxed-container { max-width: 1440px; margin: 0 auto; box-shadow: 0 24px 48px rgba(21, 24, 29, .24); mix-blend-mode: multiply; mix-blend-mode: normal } main { flex: 1 0 auto } .section-inner { position: relative; padding-top: 48px; padding-bottom: 48px } @media (min-width:641px) { h1, h2, h3, h4, h5, h6 { letter-spacing: 0 } h1 { font-size: 3em; line-height: 64px; margin-top: -30px !important } h2 { font-size: 38px; line-height: 48px } h3 { font-size: 32px; line-height: 42px } h4, h5, h6 { font-size: 1.8em; line-height: 34px; text-align: center } .site-header { position: relative } .site-header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 700px; background: #242830; background: linear-gradient(80deg, rgba(36, 40, 48, .5) 0, rgba(36, 40, 48, 0) 100%); -webkit-transform-origin: 0; transform-origin: 0; -webkit-transform: skewY(-12deg); transform: skewY(-12deg) } .hero { text-align: left; padding-top: 64px; padding-bottom: 88px } .hero-inner { display: flex; justify-content: space-between; align-items: center } .hero-copy { min-width: 552px; width: 552px } .hero-cta { margin: 0 } .hero-cta .button { min-width: 170px } .hero-cta .button:first-child { margin-right: 16px } .hero-figure svg { width: auto } .features-wrap:first-of-type { margin-top: -24px } .features-wrap:last-of-type { margin-bottom: -24px } .feature { padding: 32px } .section-inner { padding-bottom: 88px } } .center { text-align: center; margin-bottom: 30px } .tab button { background-color: inherit; float: left; border: none; outline: 0; cursor: pointer; padding: 8px 14px; transition: .4s; color: #fff } .tabcontent { display: none; border-top: none } @media (max-width:740px) { h1, h2, h3, h4 { text-align: center } .button-wide-mobile { width: 100%; max-width: 280px } .container-2 { padding-left: 10px } h2, h3, h4 { font-size: 1.4em } h1 { font-size: 1.8em } .feature-icon { margin-top: 30px } .text-sm { padding: 0 30px; margin: 0 10px; text-align: justify; font-size: .9em } .tab button { background-color: inherit; float: left; border: none; outline: 0; cursor: pointer; padding: 6px 5px; transition: .4s; font-size: .9em; color: #fff } } @media screen and (max-width:768px) { .tab { overflow: hidden; background-color: var(--blue-color-one); padding: 10px } .site-header { padding: 10px 0 0 } .hero { padding-top: 10px } } mark { padding: 5px 10px }