html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { background: #fff; } body, ul { margin: 0; } ul { padding: 0; } a { background-color: transparent; text-decoration: none; display: inline-block; } a:active, a:hover { outline: 0; } img { border: 0; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; outline: none; } li { list-style-type: none; } .equal-padding-section { padding-top: 7em; padding-bottom: 7em; } @media (max-width: 45.999em) { .equal-padding-section { padding-top: 4em; padding-bottom: 4em; } } .no-top-padding-section { padding-top: 0; padding-bottom: 7em; } @media (max-width: 45.999em) { .no-top-padding-section { padding-top: 0; padding-bottom: 4em; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .subpage-banner-section { padding-top: 9em; padding-bottom: 7em; text-align: center; z-index: 3; } @media (max-width: 45.999em) { .subpage-banner-section { padding-top: 6em; padding-bottom: 4em; } } .subpage-banner-section.no-bottom-padding, .subpage-banner-section.short { padding-bottom: 0; } @media (max-width: 45.999em) { .subpage-banner-section.no-bottom-padding { padding-bottom: 0; } } .extra-large-wrapper { max-width: 88em; padding: 0 4rem; margin: 0 auto; z-index: 2; position: relative; } @media (max-width: 74.999em) { .extra-large-wrapper { padding: 0 1rem; } } .large-wrapper { max-width: 75em; padding: 0 4rem; margin: 0 auto; z-index: 10; position: relative; } @media (max-width: 74.999em) { .large-wrapper { padding: 0 1rem; } } .medium-large-wrapper { max-width: 65em; padding: 0 4rem; margin: 0 auto; z-index: 10; position: relative; } @media (max-width: 74.999em) { .medium-large-wrapper { padding: 0 1rem; } } .medium-wrapper { max-width: 46em; margin: 0 auto; padding: 0 1rem; z-index: 3; position: relative; } @media (max-width: 74.999em) { .medium-wrapper { padding: 0 1rem; } } .medium-small-wrapper { max-width: 46em; padding: 0 4rem; margin: 0 auto; z-index: 3; position: relative; } @media (max-width: 74.999em) { .medium-small-wrapper { padding: 0 1rem; } } .medium-small-wrapper.margin-top { margin-top: 2.25rem; } .small-wrapper { max-width: 44em; padding: 0 4rem; margin: 0 auto; z-index: 3; position: relative; } @media (max-width: 74.999em) { .small-wrapper { padding: 0 1rem; } } .cta-link { vertical-align: middle; background: #fff; border-radius: 0; padding: 0.88rem 1.5rem; text-decoration: none; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.3); border: none; font-size: 0.825rem; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; color: #1e9fc4; margin-top: 4rem; margin-right: 1rem; margin-left: 1rem; } .cta-link:focus, .cta-link:hover { background: #f2f2f2; } @media (max-width: 45.999em) { .cta-link { margin-top: 1.5rem; } } .cta-link.no-top-margin { margin-top: 0; } .cta-link:focus { outline: none; background: #a5d9e7; } .cta-link-secondary { vertical-align: middle; border-radius: 0; padding: 0.88rem 1.5rem; text-decoration: none; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.3); font-size: 0.825rem; color: #1e9fc4; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; color: #fff; border: 2px solid #fff; box-shadow: none; } @media (max-width: 65em) { .cta-link-secondary { margin-top: 1.5rem; } } .cta-link-secondary, .cta-link-secondary:hover { background: transparent; } .cta-link-secondary:focus { outline: none; background: transparent; } .cta-link-blue{ vertical-align: middle; background: #1e9fc4; border-radius: 0; padding: 0.88rem 1.5rem; text-decoration: none; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.3); border: none; font-size: 0.825rem; color: #1e9fc4; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; color: #fff; margin-top: 6.25rem; } .cta-link-blue:hover { background: #1b8dae; } .cta-link-blue:focus { outline: none; background: #1b8dae; } .cta-link-blue.no-top-margin { margin-top: 0; font-size: 0.825rem; padding: 0.75em 1rem; } .cta-link-blue.large { font-size: 0.925rem; padding: 1.5rem; } .paragraph-text { line-height: 1.6em; margin-top: 0; color: #6d7586; display: block; font-size: 0.955rem; } .paragraph-text.italic { font-style: oblique; } .paragraph-text.small { font-size: 0.825rem; } .paragraph-text strong { color: #6d7586; font-weight: 400; } .paragraph-text a { color: #1e9fc4; display: inline; } .paragraph-text a:hover { text-decoration: underline; } .paragraph-text.white, .paragraph-text.white strong { color: #fff; } .paragraph-text.blue, .paragraph-text.blue strong { color: #1e9fc4; } .paragraph-text.white a { text-decoration: underline; } .paragraph-text + .h2, .paragraph-text + .h3 { margin-top: 1.5rem; } .paragraph-text.inline { text-align: left; padding-left: 1.5em; } .paragraph-text.center { text-align: center; } ::-webkit-input-placeholder { color: #c9cfd9; } .underline-link { position: relative; display: inline-block; font-size: 0.825rem; color: #1e9fc4; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; } .underline-link:after { content: ""; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: #1e9fc4; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .underline-link:hover:after { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .underline-link.white { color: #fff; } .underline-link.white:after { background-color: #fff; } .underline-link.margin-top { margin-top: 1.5rem; } .underline-link.light-grey { color: #c9cfd9; } .underline-link.light-grey:after { background-color: #c9cfd9; } .h1 { font-size: 2.25em; line-height: 1.2em; margin: 0; } .h1.large { font-size: 2.825em; margin-bottom: 1.5rem; } .h1.blue { color: #1e9fc4; } .h1.white { color: #fff; } .h1.white, .h2 { font-weight: 600; } .h2 { font-size: 2.25rem; line-height: 1.3em; margin-bottom: 0.5rem; margin-top: 0; color: #030021; } .h2.white { color: #fff; } .h2.large { font-size: 3.25rem; display: inline-block; font-weight: 600; margin-bottom: 0.25rem; } .h2.blue { color: #1e9fc4; line-height: 1.2em; } .h2 + .shadow-box { margin-top: 1rem; } .h2 + .three-column-listing { margin-top: -1rem; } .h2 + .flex-list { margin-top: 4rem; } .h2.center { text-align: center; } .h3 { font-size: 1.625rem; line-height: 1.4; margin-top: 0; color: #030021; margin-bottom: 0; font-weight: 500; } .h3.white { color: #fff; font-weight: 300; } .h3 + p { margin-top: 0.5rem; } .h3.blue { color: #1e9fc4; } .h3.grey { font-weight: 300; color: #6d7586; } .h3 + a { margin-top: 2.25rem; } .h3 + .two-column-list { margin-top: -1.5rem; } .h3.center { text-align: center; } .h4 { font-size: 1.275rem; line-height: 1.5; margin-top: 0; font-weight: 500; margin-bottom: 0; } .h4.white { color: #fff; font-weight: 600; } .h4.italic { font-style: oblique; color: #fff; margin-bottom: 2.25rem; } .h4.blue { font-weight: 600; color: #1e9fc4; } .h4 + p { margin-top: 0.5rem; } .h4.center { text-align: center; } .h5 { font-size: 1rem; line-height: 1.5rem; margin-top: 0; margin-bottom: 0; font-weight: 500; } .h5 + p { margin-top: 0.5rem; } .h6 { font-size: 0.925rem; line-height: 1.2rem; margin-top: 0; margin-bottom: 0.5rem; font-weight: 300; } .h6 + p { margin-top: 1.5rem; } .h6.grey { color: #6d7586; } .h6.blue { margin-bottom: 1rem; color: #1e9fc4; font-weight: 500; } .text-link { font-weight: 300; color: #6d7586; } .text-link:after { bottom: 0; background: #6d7586; } .text-link.blue { color: #1e9fc4; font-weight: 400; } .text-link.blue:after { background: #1e9fc4; } .text-link.white { color: #fff; } .text-link.black { color: #030021; font-size: 0.925rem; font-weight: 400; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .text-link.black:hover { color: #1e9fc4; } .uppercase-title { font-size: 0.825rem; color: #1e9fc4; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; margin-top: 3.25rem; margin-bottom: 0.925rem; color: #a2acbc; display: block; } .uppercase-title.no-bottom-margin { margin-bottom: 0; margin-top: 0.25em; } .uppercase-title.no-top-margin { margin-top: 0; } .uppercase-title.dark-grey { color: #6d7586; } .uppercase-title.white { color: #fff; } .uppercase-title.inline { display: inline-block; } .uppercase-title.small { font-size: 0.625rem; } .uppercase-title.left { text-align: left; padding-left: 1.5rem; } .large-paragraph { font-size: 1.275rem; line-height: 1.5; color: #6d7586; font-weight: 300; } .large-paragraph.white { color: #fff; max-width: 30rem; margin: 1rem auto 2em; } .large-paragraph.black { color: #030021; } .large-paragraph + .flex-list { margin-top: 4rem; } .yellow { color: #f5ee33; } .page-title { color: #1e9fc4; font-weight: 600; font-size: 3.125rem; line-height: 1.2em; text-align: center; margin: 0; } .page-title > a { color: #fff; } .page-title .yellow { color: #f5ee33; font-weight: 600; } .page-title.left { text-align: left; font-size: 3rem; } .page-title.black { color: #030021; } .page-title + .main-copy { margin-top: 2.25rem; } .page-title.white { color: #fff; font-family: 'Trebuchet MS', sans-serif; margin-top:10px; margin-bottom: 30px; text-shadow: 0 6px 1px rgba(29,130,206,.1), 0 0 5px rgba(29,130,206,.1), 0 1px 3px rgba(29,130,206,.3), 0 3px 5px rgba(29,130,206,.2), 0 5px 10px rgba(29,130,206,.25), 0 10px 10px rgba(29,130,206,.2), 0 20px 20px rgba(29,130,206,.15); } @media (max-width: 64.999em) { .page-title.white { margin-top:20px; } } .page-title.small { font-size: 2.625em; } .no-padding-shadow-box { background: #fff; border: 1px solid #f3f5f9; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; text-align: center; height: 100%; } .no-padding-shadow-box > .h3 { padding: 2.25rem 2.25rem 0; } .button-list { border-bottom: 1px solid #c9cfd9; padding: 2.25rem 1rem 0; } .button-list > li { display: inline-block; } .button-list > li + li { padding-left: 4rem; } @media (max-width: 64.999em) { .button-list { display: none; } } .tab-button { cursor: pointer; color: #a2acbc; padding: 0 0 1rem; text-align: left; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; } .tab-button svg path { fill: #a2acbc; -webkit-transition: fill 0.2s ease-in-out; transition: fill 0.2s ease-in-out; } .tab-button:after { content: ""; position: absolute; width: 0; height: 3px; bottom: 0; right: 0; background-color: #1e9fc4; visibility: hidden; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .tab-button:hover { color: #030021; } .tab-button:hover svg path { fill: #1e9fc4; } .tab-button:hover:after { visibility: visible; width: 100%; left: 0; } .tab-button.active { color: #030021; } .tab-button.active svg path { fill: #1e9fc4; } .tab-button.active:after { visibility: visible; width: 100%; left: 0; } .tab-list { padding: 4rem; } @media (max-width: 64.999em) { .tab-list { padding: 2.25rem; } } .tab-list > li { text-align: left; } .tab-list > li .tab-image { width: 50%; } @media (min-width: 65em) { .tab-list > li { opacity: 0; visibility: hidden; height: 0; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .tab-list > li.active { opacity: 1; visibility: visible; height: auto; } } @media (max-width: 64.999em) { .tab-list > li + li { margin-top: 4rem; } } @media (min-width: 65em) { .tab-list > li > .text-wrapper { padding-left: 4rem; width: 50%; } } .tab-list > li .flex-wrapper { margin-bottom: 1rem; } @media (max-width: 45.999em) { .tab-list > li .tab-image { width: 100%; } } #tab-container { margin-top: 2.25rem; } html { color: #030021; font-size: 1rem; } @media (max-width: 34.999em) { html { font-size: 0.85rem; } } * { box-sizing: border-box; } body { font-family: 'Mukta Vaani', sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; } @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (-webkit-min-device-pixel-ratio: 2.0833333333333335), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 1.25dppx), only screen and (min-resolution: 200dpi) { body { -webkit-font-smoothing: subpixel-antialiased; } } .outer-wrap { background: #030021; } .inner-wrap, .outer-wrap { overflow: hidden; position: relative; } .inner-wrap { max-width: 120em; margin: 0 auto; min-height: 100vh; background: #fff; box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.4); } img { max-width: 100%; } section { position: relative; z-index: 2; background: #fff; } section.grey { background: #f3f5f9; } section.center { text-align: center; } section.main-gradient { background: #1e9fc4; background-image: linear-gradient(105deg, #3f2fbd, #1e9fc4 57%, #3ff9ee); } section.grey-gradient { background-image: -webkit-gradient( linear, left top, left bottom, color-stop(1%, #fff), to(#f3f5f9) ); background-image: linear-gradient(180deg, #fff 1%, #f3f5f9); } ::-moz-selection { background: #1e9fc4; text-shadow: none; color: #fff; } ::selection { background: #1e9fc4; text-shadow: none; color: #fff; } select::-ms-expand { display: none; } :focus { outline: 1px dashed #a2acbc; outline-offset: 4px; } .contact-form { position: relative; } @media (min-width: 46em) { .contact-form { width: 60%; } } .ie9 .contact-form { display: inline-block; vertical-align: top; } .contact-form-wrapper .contactForm { width: 100% !important; font-size: inherit !important; display: block; } @media only screen and (max-width: 480px) { .contact-form-wrapper .contactForm, .contact-form-wrapper .contactForm * { padding: 0; } } .contact-form-wrapper .contactForm .contactField { padding: 0.72em 1rem; vertical-align: middle; border-radius: 0; border: 1px solid #c9cfd9; text-align: left; width: 100%; color: #1e9fc4; font-size: 0.925rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0px 0 1rem 0; -webkit-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; width: 100% !important; } .contact-form-wrapper .contactForm .contactField.error, .contact-form-wrapper .contactForm .contactField.error:hover { border: 1px solid #f2694f; } .contact-form-wrapper .contactForm .contactField#password { padding-right: 5em; } .contact-form-wrapper .contactForm .contactField:hover { border: 1px solid #1e9fc4; } .contact-form-wrapper .contactForm .contactField#email { padding-right: 2.5em; } @media (max-width: 34.999em) { .contact-form-wrapper .contactForm .contactField { font-size: 16px; padding: 0.5em 1.5rem; } } .contact-form-wrapper .contactForm .contactField.large { padding: 0.25rem 1rem 0.5rem; font-size: 1.625rem; font-weight: 500; line-height: 1; text-align: center; } .contact-form-wrapper .contactForm .contactField.largest { padding: 1.5rem; font-size: 1rem; } .contact-form-wrapper .contactForm .contactField:focus { outline: none; border-color: #1e9fc4; } @media only screen and (max-width: 480px) { .contact-form-wrapper .contactForm .contactField { height: auto; } } .contact-form-wrapper .contactForm .contactLabel { float: none; font-weight: 400 !important; width: 100% !important; } .contact-form-wrapper .contactForm .contactClear, .contact-form-wrapper .contactForm .contactOffset { display: none; } .contact-form-wrapper .contactForm .contactFormRow { display: -webkit-box; display: flex; flex-wrap: wrap; gap: 1.5rem; } .contact-form-wrapper .contactForm .contactFormRow:has(.contactFieldDescriptor):not(:first-child) { margin-top: 1.25em; } .contact-form-wrapper .contactForm .contactFormCol { -webkit-box-flex: 1; flex: 1 0 0%; width: 100%; float: none; margin-bottom: 0 !important; } @media only screen and (max-width: 480px) { .contact-form-wrapper .contactForm .contactFormCol { -webkit-box-flex: 100%; flex: 100%; } } .contact-form-wrapper .contactForm .contactFieldWrap { float: none; } .contact-form-wrapper .contactForm .contactButtonRow { margin-top: 2.25rem; display: block; } .contact-form-wrapper .contactForm .contactButtonWrap.contactRound { margin-left: 0 !important; } .contact-form-wrapper .contactForm .contactButtonWrap.contactRound button.contactButton { margin-top: 0rem; } .contact-form-wrapper.contact-form-centered-button .contactButtonRow { text-align: center; } .affiliate-form { width: 100%; position: relative; } .contact-form-field-list { margin-top: 1.5rem; text-align: left; } .contact-form-field-list > li { position: relative; } .contact-form-field-list > li + li { margin-top: 1.25em; } .contact-form-field-list > li.hidden { display: none; } .text-field { padding: 0.72em 1rem; vertical-align: middle; border-radius: 0; border: 1px solid #c9cfd9; width: 100%; color: #1e9fc4; font-size: 0.925rem; margin: 0; -webkit-transition: border 0.2s ease-in-out; transition: border 0.2s ease-in-out; text-align: left; } @media (max-width: 34.999em) { .text-field { font-size: 16px; padding: 0.5em 1.5rem; } } .text-field.large { padding: 0.25rem 1rem 0.5rem; font-size: 1.625rem; font-weight: 500; line-height: 1; text-align: center; } .field-label { display: block; font-size: 0.8em; font-weight: 400; margin-bottom: 0.25rem; } .field-label.large { font-size: 0.995rem; margin-bottom: 0.5rem; font-weight: 600; color: #1e9fc4; text-transform: uppercase; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; } .contact-info-link { position: relative; display: inline-block; font-size: 0.825rem; color: #1e9fc4; letter-spacing: 2px; line-height: 1rem; text-transform: uppercase; font-weight: 600; } .contact-info-link:after { content: ""; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: #1e9fc4; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .contact-info-link:hover:after { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } .contact-info-link.white { color: #fff; } .contact-info-link.white:after { background-color: #fff; } .contact-info-link.margin-top { margin-top: 1.5rem; } .contact-info-link.light-grey { color: #c9cfd9; } .contact-info-link.light-grey:after { background-color: #c9cfd9; } .contact-info-sublist { overflow: hidden; padding-bottom: 0.5rem; } .contact-info-sublist > li + li { margin-top: 0.25rem; } .ordered-list { padding-left: 0; list-style-type: none; margin: 1.5rem auto 0; } .ordered-list > li { position: relative; counter-increment: step-counter; padding-left: 1rem; box-sizing: border-box; counter-reset: item; line-height: 1.6em; margin-top: 0; color: #6d7586; display: block; font-size: 0.925rem; } .ordered-list > li + li { margin-top: 0.5rem; } .ordered-list > li:before { content: counter(step-counter); font-weight: 600; position: absolute; left: 0; top: 0; color: #6d7586; } header { background: transparent; z-index: 2000; position: absolute; right: 0; left: 0; top: 0; margin-bottom: 1em; -webkit-transition: all 0.3s linear; transition: all 0.3s linear; } header > .extra-large-wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding-top: 1.5rem; max-width: 88em; width: 100%; } @media (max-width: 64.999em) { header > .extra-large-wrapper { padding-top: 1.25em; } } .ie10 header > .extra-large-wrapper { display: block; } header.fixed { background: #1e9fc4; background-image: linear-gradient(105deg, #3f2fbd, #1e9fc4 57%, #3ff9ee); position: fixed; padding: 0.5rem 0; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15); } header.fixed .main-logo { background-image: url(https://www.microsis.com.br/assets/img/Microsis-Controle-e-Gestão-de-Ponto.png); } header.fixed .main-nav-link, header.fixed .main-nav-list a { outline: none; } header.fixed .main-nav-link.current, header.fixed .main-nav-list a.current { color: #1e9fc4; } header.fixed .main-nav-link:hover, header.fixed .main-nav-list a:hover { color: #a5d9e7; } header.fixed > .extra-large-wrapper { padding-top: 0.5rem; } header.fixed .main-nav-list button { outline: none; color: #fff; } header.fixed .main-nav-list button:after, header.fixed .main-nav-list button:hover { color: #a5d9e7; } header.fixed .utility-nav-list .register-link { background-color: #1e9fc4; color: #fff; } header.fixed .utility-nav-list .register-link:hover { background-color: #1b8dae; } header .main-products-list.current_page_item > a { color: #1e9fc4; } header .utility-nav-list .menu-link { color: #030021; } header .utility-nav-list .menu-link:hover { color: #a5d9e7; } @media (max-width: 64.999em) { header .utility-nav-list .menu-button span { background: #1e9fc4; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } } @media (min-width: 65em) { .menu-wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; max-width: 100%; width: 66%; } } @media (max-width: 64.999em) { .menu-wrapper { display: none; background: #fff; border: 1px solid #f3f5f9; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; position: fixed; right: 1rem; left: 1rem; top: 4.3em; line-height: 1em; overflow: hidden; overflow-y: auto; max-height: calc(100vh - 50px); } } .ie9 .menu-wrapper, .ie10 .menu-wrapper { display: inline-block; max-width: 71%; } @media (min-width: 65em) { .menu-button { display: none; } } @media (max-width: 64.999em) { .menu-button { right: 1em; top: 1em; width: 24px; height: 24px; -webkit-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; cursor: pointer; background: none; background: #1e9fc4; border: 1px solid #f3f5f9; border-left: 3px solid #1e9fc4; outline: none; } .menu-button, .menu-button span { display: block; position: absolute; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .menu-button span { height: 2px; width: 100%; background: #1e9fc4; border-radius: 9px; opacity: 1; left: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .white .menu-button span { background: #fff; } .fixed .menu-button span { background: #1e9fc4; } } .menu-button span:first-child { top: 0; } .menu-button span:nth-child(2), .menu-button span:nth-child(3) { top: 8px; } .menu-button span:nth-child(4) { top: 16px; } .menu-button.open span:first-child { top: 12px; width: 0; left: 50%; } .menu-button.open span:nth-child(2) { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .menu-button.open span:nth-child(3) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .menu-button.open span:nth-child(4) { top: 0; width: 0; left: 50%; } .main-logo { display: inline-block; vertical-align: middle; margin-right: 2.25rem; max-width: 90%; } @media (max-width: 64.999em) { .main-logo { /*margin-right: 0; max-width: 60%;*/ width: 70%; } } .main-logo img{ -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } .main-logo img:hover { -webkit-transform: scale(1.2); transform: scale(1.2); } .main-nav-list { outline: none; vertical-align: middle; } @media (min-width: 65em) { .main-nav-list { display: inline-block; } } .main-nav-list > li { display: inline-block; } .main-nav-list > li + li { margin-left: 2.25rem; } @media (max-width: 64.999em) { .main-nav-list > li { display: block; } .main-nav-list > li + li { margin-left: 0; } .main-nav-list > li.half-width { display: inline-block; width: 50%; } .main-nav-list > li.half-width .main-nav-link { padding: 0.5rem 2.25rem; } .main-nav-list > li.half-width + .half-width { padding-left: 1rem; } .main-nav-list > li.half-width + .half-width .main-nav-link { padding: 0.5rem 0; } } @media (max-width: 45.999em) { .main-nav-list.half-width { width: 49%; } } .main-nav-link { color: #030021; text-decoration: none; font-weight: 400; line-height: 1em; font-size: 0.925rem; outline: none; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .main-nav-link.current { color: #1e9fc4; } .main-nav-link:hover { color: #a5d9e7; } .main-nav-link:focus { color: #1e9fc4; } @media (max-width: 74.999em) { .main-nav-link { font-size: 0.925rem; } } @media (min-width: 65em) { .white .main-nav-link { color: #fff; } .white .main-nav-link:focus, .white .main-nav-link:hover { color: #a5d9e7; } } @media (min-width: 65em) { .blue .main-nav-link { color: #1D9FC4; } .blue .main-nav-link:focus, .blue .main-nav-link:hover { color: #67DDFF; } } @media (max-width: 64.999em) { .main-nav-link { padding: 0.5rem 0; } } .products-button, .resources-button { font-size: 0.925rem; outline: none; } @media (min-width: 65em) { .products-button, .resources-button { background: none; border: none; padding: 0 1.5em 0 0; color: #030021; font-weight: 400; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .products-button:after, .resources-button:after { content: "\E90F"; font-family: icomoon; font-size: 4px; color: #a5d9e7; margin-left: 0.5rem; position: absolute; top: 3em; -webkit-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; } .white .products-button:after, .white .resources-button:after { color: #fff; } .products-button:hover, .resources-button:hover { color: #a5d9e7; } .white .products-button, .white .resources-button { color: #fff; } .white .products-button:hover, .white .resources-button:hover { color: #a5d9e7; } .products-button.open:after, .resources-button.open:after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @media (max-width: 64.999em) { .products-button, .resources-button { display: none; } } .products-nav-wrapper, .resources-nav-wrapper { position: relative; } @media (min-width: 65em) { .resources-nav-inner-wrapper { background: #fff; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; border: none; width: 44em; position: absolute; top: 2.25em; display: none; left: -15em; } .resources-nav-inner-wrapper.open { display: block; } } .resources-nav-inner-wrapper .uppercase-title { margin-top: 0; } @media (max-width: 64.999em) { .resources-nav-inner-wrapper .uppercase-title { margin-bottom: 1rem; } } @media (max-width: 72.999em) { .resources-nav-inner-wrapper { left: -18.75em; } } @media (min-width: 65em) { .products-nav-inner-wrapper { background: #fff; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; border: none; width: 38em; position: absolute; top: 2.25em; display: none; left: -10em; } .products-nav-inner-wrapper.open { display: block; } } .products-nav-inner-wrapper .uppercase-title { margin-top: 0; } @media (max-width: 64.999em) { .products-nav-inner-wrapper .uppercase-title { margin-bottom: 1rem; } } @media (max-width: 64.999em) { .products-nav-inner-wrapper { left: 0; position: relative; display: block; width: 100%; } } .nav-flex-right { border-left: 1px solid #f3f5f9; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-pack: justify; justify-content: space-between; margin: 1rem 0; padding-left: 3em; } @media (min-width: 65em) { .nav-flex-right { width: 80%; } } @media (max-width: 64.999em) { .nav-flex-right { padding-left: 0; padding-bottom: 0.5rem; margin: 2.25rem 0 0; border-left: none; border-bottom: 1px solid #f3f5f9; } .nav-flex-right ul { margin-top: 1.5rem; } } .main-products-list { -webkit-box-flex: 90%; flex: 90%; width: 100%; } @media (min-width: 65em) { .main-products-list { display: inline-block; padding-right: 2.25rem; } .main-products-list > li + li { margin-top: 0.5rem; } } @media (max-width: 64.999em) { .main-products-list > li { display: inline-block; width: 49%; vertical-align: top; } .main-products-list > li:nth-child(2n) { padding-left: 1rem; } .main-products-list > li + li + li { margin-top: 1.5rem; } } .main-products-list + .resources-parent-list { -webkit-box-flex: 1; flex: auto; padding-top: 1.125em; } @media (min-width: 65em) { .main-products-list + .resources-parent-list { padding-left: 2.25rem; padding-right: 2.25rem; } } @media (min-width: 65em) { .resources-blog-list { padding-left: 2.25rem; max-width: 26em; } } @media (max-width: 64.999em) { .resources-blog-list { margin-top: 1.5rem; border-top: 1px solid #f3f5f9; padding-top: 1.5rem; } } .resources-blog-list > li + li { margin-top: 1rem; } .main-link { position: relative; width: 100%; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } @media (min-width: 65em) { .main-link { padding: 1rem; border: 1px solid transparent; border-left-width: 3px; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } } @media (min-width: 65em) { .main-link:hover { background: #fff; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; border: 1px solid #f3f5f9; border-left: 3px solid #1e9fc4; } } .main-link:hover .main-header { color: #1e9fc4; } .main-link:hover .main-link-shadow-box { opacity: 1; } .main-header { color: #030021; font-weight: 400; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } @media (min-width: 65em) { .nav-flex-wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: 1.5rem 2.25rem 1.5rem 1.125rem; } } @media (max-width: 64.999em) { .nav-flex-wrapper { padding: 2.25rem 2.25rem 1.5rem; } } .nav-flex-wrapper.resources { padding: 2.25rem; } .resources-parent-list { -webkit-box-flex: 62%; flex: 62%; } @media (min-width: 65em) { .resources-parent-list > li { display: inline-block; vertical-align: top; } .resources-parent-list > li + li { margin-left: 5rem; } } @media (max-width: 64.999em) { .resources-parent-list > li + li { margin-top: 1.5rem; } } @media (min-width: 65em) { .resources-nav-list > li + li { margin-top: 1rem; } } @media (max-width: 64.999em) { .resources-nav-list > li { display: inline-block; vertical-align: top; } .resources-nav-list > li + li { margin-left: 1.5rem; } } @media (max-width: 34.999em) { .resources-nav-list > li { width: 49%; display: inline-block; text-align: left; margin-bottom: 1rem; box-sizing: border-box; } .resources-nav-list > li:nth-child(2n) { padding-left: 1rem; } .resources-nav-list > li + li { margin-left: 0; } } .resources-nav-link { color: #030021; font-size: 0.925rem; font-weight: 400; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .resources-nav-link:hover { color: #a5d9e7; } .resources-nav-link.current { color: #1e9fc4; } .resources-nav-link.thin { font-weight: 100; } .utility-nav-list { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; max-width: 100%; } .utility-nav-list > li { display: inline-block; } .utility-nav-list > li + li { margin-left: 2.25rem; } @media (max-width: 64.999em) { .utility-nav-list { padding: 0 2.25rem 2.25rem; -webkit-box-pack: center; justify-content: center; } } .ie9 .utility-nav-list, .ie10 .utility-nav-list { display: inline-block; } .ie10 .utility-nav-list { max-width: 24em; } .register-link { padding: 0.75em 1rem 0.8em; margin: 0; } .overlay { opacity: 0; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; position: fixed; } .overlay.visible { opacity: 1; background: rgba(3, 0, 33, 0.5); right: 0; left: 0; top: 0; bottom: 0; z-index: 300; } .overlay.light-grey { background: rgba(3, 0, 33, 0.3); } .homepage-banner-section { padding-top: 11em; text-align: center; padding-bottom: 6em; } @media (max-width: 45.999em) { .homepage-banner-section { padding-top: 8em; padding-bottom: 6em; } } @media (min-width: 46em) { .homepage-banner-section:after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; width: 100%; background-image: url(https://www.microsis.com.br/assets/img/fundo.png); background-size: cover; background-position: bottom; background-repeat: no-repeat; z-index: -2; } .homepage-banner-section:before { background-image: -webkit-gradient( linear, left top, left bottom, from(#070779), color-stop(80%, rgba(42, 72, 180, 0)) ); background-image: linear-gradient( 180deg, #070779, rgba(42, 72, 180, 0) 80% ); content: ""; position: absolute; top: 0; right: 0; left: 0; height: 13em; width: 100%; z-index: -1; } } .company-banner-section { padding-top: 11em; text-align: center; padding-bottom: 6em; } @media (max-width: 45.999em) { .company-banner-section { padding-top: 8em; padding-bottom: 6em; } } @media (min-width: 46em) { .company-banner-section:after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; height: 100%; width: 100%; background-size: cover; background-position: bottom; background-repeat: no-repeat; z-index: -2; } .company-banner-section:before { background-image: -webkit-gradient( linear, left top, left bottom, from(#070779), color-stop(80%, rgba(42, 72, 180, 0)) ); background-image: linear-gradient( 180deg, #070779, rgba(42, 72, 180, 0) 80% ); content: ""; position: absolute; top: 0; right: 0; left: 0; height: 13em; width: 100%; z-index: -1; } } @media (min-width: 46em) { .background-line { position: absolute; right: 0; left: 0; bottom: 0; height: 20em; opacity: 0.2; width: 100%; background-image: -webkit-gradient( linear, left top, left bottom, from(#070779), color-stop(80%, rgba(42, 72, 180, 0)) ); background-image: linear-gradient( 180deg, #070779, rgba(42, 72, 180, 0) 80% ); background-size: cover; background-position: bottom; background-repeat: no-repeat; z-index: -2; } } .list { max-width: 65em; margin: 0 auto; text-align: center; } .list > li { display: inline-block; margin: 1.5rem 1rem 0; vertical-align: middle; } @media (max-width: 34.999em) { .list > li { margin: 1.5rem 0.5rem 0; } } .list.small > li { margin: 1.5rem 0.5rem 0; } .list + .three-column-listing { margin-top: 2.25rem; margin-bottom: 0; } @media (min-width: 46em) { .large-cta-section:after { content: ""; position: absolute; top: 0; right: 0; height: 100%; width: 100%; background-size: 18%; background-position: 100% 100%; background-repeat: no-repeat; z-index: -2; } } @media (min-width: 65em) { .large-cta-section > .large-wrapper { text-align: left; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } } @media (max-width: 64.999em) { .large-cta-section > .large-wrapper { text-align: left; display: block; } } .benefits-list { text-align: center; margin: 1rem auto; } .benefits-list > li { display: inline-block; vertical-align: middle; margin: 1rem 1rem 0; } .benefits-link { display: block; opacity: 1; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; } .benefits-link:hover { opacity: 0.5; } .benefits-logo { max-width: 10em; } .no-button-list { margin: 2.25rem auto -0.5rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; flex-wrap: wrap; -webkit-box-pack: center; justify-content: center; } .no-button-list > li { width: auto; padding: 0.5rem 1.5rem; display: -webkit-box; display: flex; } .no-button-list > li img { align-self: center; } .logo { max-width: 100%; background-size: 100%; align-self: center; transition: transform 5s ease; } .logo.info { background-position: 0 31.558935%; background-size: 105.714286%; } .logo:hover{ transform: scale(1.2); transition: transform 1s ease; } .inline-wrapper { display: inline-block; } .inline-wrapper + .inline-wrapper { margin-left: 1rem; } .inline-wrapper + .h3 { display: inline-block; margin-left: 1rem; vertical-align: top; } .main-link-shadow-box { text-align: center; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-top: 0.25em; } .main-link-shadow-box img { height: 2.25em; } .main-link-shadow-box.small { display: inline-block; margin-top: 0; margin-right: 0.75em; -webkit-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; vertical-align: top; } .main-link-shadow-box.small img { height: auto; width: 1.75em; } .text-link-wrapper { display: inline-block; } .cta-text-wrapper { text-align: left; display: inline-block; } @media (max-width: 45.999em) { .cta-text-wrapper { display: block; text-align: center; } } .cta-button-wrapper { text-align: left; display: inline-block; margin-left: 2.25rem; } .cta-button-wrapper .cta-link { margin-top: 0; } @media (max-width: 64.999em) { .cta-button-wrapper { display: block; margin-top: 1.5rem; margin-left: -1rem; } } @media (max-width: 45.999em) { .cta-button-wrapper { text-align: center; margin-left: 0; } } .three-column-listing { display: -webkit-box; display: flex; margin-right: -1.5rem; margin-left: -1.5rem; margin-top: -4rem; -webkit-box-pack: start; justify-content: flex-start; text-align: left; } @media (max-width: 45.999em) { .three-column-listing { text-align: center; flex-direction: column; } } .three-column-listing > li { -webkit-box-flex: 1; flex: 1 1 33%; vertical-align: top; box-sizing: border-box; padding: 4rem 1.5rem 0; max-width: 33%; position: relative; } .three-column-listing > li > .paragraph-text { margin-bottom: 0; } .three-column-listing > li > .underline-link { margin-top: 2.25rem; } .three-column-listing > li > .shadow-box { padding: 1.5rem; } @media (max-width: 45.999em) { .three-column-listing > li { -webkit-box-flex: 1; flex: 1 1 100%; max-width: 100%; } } .ie9 .three-column-listing > li { display: inline-block; width: 32%; } .three-column-listing.blog > li { display: -webkit-box; display: flex; } .three-column-listing.center { text-align: center; } .three-column-listing.short { margin-top: 0; } @media (max-width: 45.999em) { .three-column-listing.short { margin-top: 0; } } .three-column-listing.short > li { padding: 1rem 1.5rem 0; } @media (min-width: 46em) { .flex-wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; } } .flex-wrapper + .flex-wrapper { margin-top: 7em; } .flex-wrapper.left { -webkit-box-pack: start; justify-content: flex-start; } .flex-wrapper + .page-title { margin-top: 2.25rem; } .flex-wrapper.top { -webkit-box-align: start; align-items: flex-start; } .flex-wrapper.no-center { -webkit-box-align: inherit; align-items: inherit; } .flex-wrapper .main-copy { -webkit-box-flex: 1; flex: 1 1 45%; margin-right: 4em; } .feature-cta-icon { margin-bottom: 1rem; height: 3em; } .feature-cta-icon + div { padding-left: 1rem; } .story-list { margin-bottom: 1.5rem; } .story-list > li { text-align: left; padding-bottom: 1.5rem; } .story-list .name { font-size: 0.825rem; margin-top: 1.5rem; } .story-list .title { font-size: 0.825rem; } .story-list + .h4 { margin-top: 2.25rem; margin-bottom: 1.5rem; } .story-logo { margin-top: 0.5rem; max-width: 7em; } .story-logo + .paragraph-text { margin-top: 0.5rem; } .video-wrapper { position: relative; width: 100%; } .video-wrapper img { border-radius: 0; width: 100%; } .video-text-wrapper { padding: 1.5rem 2.25rem 2.25rem; -webkit-box-pack: justify; justify-content: space-between; } @media (min-width: 46em) { .video-text-wrapper { display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; height: 62%; } } .video-text-wrapper .paragraph-text { margin-bottom: 0; margin-top: 1rem; } .video-text-wrapper .underline-link { align-self: center; } .flex-wrapper > .video-text-wrapper { display: block; text-align: left; -webkit-box-flex: 1; flex: 1 1 75%; } .video-link:hover .small-video-play-link:before { color: #1e9fc4; } .small-video-play-link { color: #fff; } .small-video-play-link.icon { position: absolute; right: 50%; left: 42%; top: 51%; width: 3rem; -webkit-transform: translate3d(0, -55%, 0); transform: translate3d(0, -55%, 0); border-radius: 10em; } .small-video-play-link.icon:before { content: "\E903"; font-family: icomoon; color: #fff; font-size: 3em; padding: 1px; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .small-video-play-link.icon:hover:before { color: #1e9fc4; } .full-width-nav-description { display: block; font-size: 0.825rem; color: #6d7586; font-weight: 300; margin-top: 0.25rem; } .shadow-box { background: #fff; border: 1px solid #f3f5f9; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; padding: 4rem 2.25rem; text-align: center; height: 100%; } .shadow-box.short-padding { padding: 2.25rem; text-align: left; } .shadow-box.shorter-padding { padding: 1rem; text-align: left; } @media (min-width: 46em) { .shadow-box.long-padding { padding: 4rem; } } .shadow-box.left { text-align: left; } .shadow-box.no-padding { padding: 0; } .shadow-box.hover { background: #fff; border: 1px solid #f3f5f9; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; -webkit-transition: box-shadow 0.2s ease-in-out; transition: box-shadow 0.2s ease-in-out; } .shadow-box.hover:focus, .shadow-box.hover:hover { box-shadow: 0 5px 20px 0 rgba(190, 191, 199, 0.75); } .shadow-box.hover:focus { outline: none; } .shadow-box.center { text-align: center; } .shadow-box-button { text-align: left; padding: 1.5rem 2.25rem 2.25rem; background: transparent; border-radius: 0; border: 1px solid transparent; border-left-width: 4px; width: 100%; position: relative; cursor: pointer; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .shadow-box-button h3 { -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .shadow-box-button:after { content: "\E90F"; font-family: icomoon; font-size: 0.825rem; -webkit-transform: rotate(90deg); transform: rotate(90deg); color: #e2e7f1; position: absolute; right: 2.25em; top: 2.7em; } .shadow-box-button.active { box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border: 1px solid #f3f5f9; border-left: 4px solid #1e9fc4; background: #fff; display: block; } .shadow-box-button.active:after { display: none; } .shadow-box-button:hover h3 { color: #1e9fc4; } .shadow-box-button:focus { outline: none; } .shadow-box-button p { margin-bottom: 0; } .shadow-box-button.active:hover h3 { color: #030021; } .no-padding-shadow-box { background: #fff; border: 1px solid #f3f5f9; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.2); border-radius: 0; text-align: center; height: 100%; } .no-padding-shadow-box > .h3 { padding: 2.25rem 2.25rem 0; } footer { background: #030021; color: #fff; position: relative; z-index: 2; } footer .extra-large-wrapper { z-index: 100; position: relative; padding-bottom: 4rem; padding-top: 4rem; } @media (max-width: 45.999em) { footer .extra-large-wrapper { padding-bottom: 1.5rem; padding-top: 1.5rem; } } @media (min-width: 65em) { .footer-navigation-wrapper { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; } } .footer-navigation-list > li { display: inline-block; vertical-align: top; } @media (min-width: 75em) { .footer-navigation-list > li + li { margin-left: 3.5rem; } } @media (max-width: 74.999em) { .footer-navigation-list > li + li { margin-left: 1.5rem; } } @media (min-width: 40em) { .footer-navigation-list { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; } } @media (max-width: 39.999em) { .footer-navigation-list { padding-right: 0; margin: 0 auto; display: block; } .footer-navigation-list > li { text-align: left; width: 49%; } .footer-navigation-list > li + li { margin-left: 0; } .footer-navigation-list > li + li + li { margin-top: 2.25rem; } } .ie9 .footer-navigation-list { display: inline-block; width: 54%; } .footer-secondary-nav-list > li { margin-top: 1rem; } .footer-extras-list { margin-left: 4rem; } @media (min-width: 35em) { .footer-extras-list { display: -webkit-box; display: flex; } } .footer-extras-list > li { max-width: 18rem; display: inline-block; vertical-align: top; position: relative; } @media (min-width: 75em) { .footer-extras-list > li + li { margin-left: 4rem; } } @media (max-width: 74.999em) { .footer-extras-list > li + li { margin-left: 4rem; } } @media (max-width: 64.999em) { .footer-extras-list { padding-right: 0; margin: 2.25rem auto 0 0; } .footer-extras-list > li { text-align: left; min-width: 8em; } .footer-extras-list > li + li { margin-left: 4rem; } } @media (max-width: 34.999em) { .footer-extras-list > li { width: 100%; max-width: 100%; } .footer-extras-list > li + li { margin-left: 0; margin-top: 1.5rem; } } .ie9 .footer-extras-list { display: inline-block; width: 40%; vertical-align: top; } .ie9 .footer-extras-list > li { display: inline-block; width: 42%; } .footer-contact-wrapper { margin-top: 4rem; } @media (min-width: 46em) { .footer-contact-wrapper { display: -webkit-box; display: flex; -webkit-box-align: end; align-items: flex-end; } } @media (max-width: 45.999em) { .footer-contact-wrapper { margin-top: 2.25rem; } } .footer-extra-title { display: block; font-size: 0.925rem; margin-bottom: 1rem; position: relative; } .footer-icon { position: absolute; left: -2.25em; top: -0.25em; } .footer-link-wrapper { display: block; } .footer-link { font-size: 0.925rem; color: #fff; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; cursor: pointer; font-weight: 500; } .footer-link.blue, .footer-link:hover { color: #1e9fc4; } .footer-link + .footer-link { margin-top: 1rem; } .footer-text { font-size: 0.925rem; color: #fff; display: block; } .footer-nav-title { text-transform: uppercase; letter-spacing: 2px; font-size: 0.825rem; display: block; color: #6d7586; font-weight: 600; margin-bottom: 1.5rem; } .footer-copyright-wrapper { border-top: 1px solid #3f444e; text-align: left; margin-top: 1.5rem; padding-top: 1.5rem; display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; } .made-with-text { font-size: 0.825rem; color: #6d7586; line-height: 10px; display: inline-block; } @media (max-width: 45.999em) { .made-with-text { display: block; margin-left: 0; margin-top: 1.5rem; } } @media (min-width: 35em) { .made-with-text + .made-with-text { margin-left: 2.25rem; } } .ico-facebook { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M9.5 3H12V0H9.5C7.57 0 6 1.57 6 3.5V5H4v3h2v8h3V8h2.5l.5-3H9V3.5c0-.271.229-.5.5-.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-linkedin { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M6 6h2.767v1.418h.04C9.192 6.727 10.134 6 11.539 6C14.46 6 15 7.818 15 10.183V15h-2.885v-4.27c0-1.018-.021-2.329-1.5-2.329c-1.502 0-1.732 1.109-1.732 2.255V15H6zM1 6h3v9H1zm3-2.5a1.5 1.5 0 1 1-3.001-.001A1.5 1.5 0 0 1 4 3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-youtube { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M15.841 4.8s-.156-1.103-.637-1.587c-.609-.637-1.291-.641-1.603-.678c-2.237-.163-5.597-.163-5.597-.163h-.006s-3.359 0-5.597.163c-.313.038-.994.041-1.603.678C.317 3.697.164 4.8.164 4.8S.005 6.094.005 7.391v1.213c0 1.294.159 2.591.159 2.591s.156 1.103.634 1.588c.609.637 1.409.616 1.766.684c1.281.122 5.441.159 5.441.159s3.363-.006 5.6-.166c.313-.037.994-.041 1.603-.678c.481-.484.637-1.588.637-1.588s.159-1.294.159-2.591V7.39c-.003-1.294-.162-2.591-.162-2.591zm-9.494 5.275V5.578l4.322 2.256z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-instagram { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M14.5 0h-13C.675 0 0 .675 0 1.5v13c0 .825.675 1.5 1.5 1.5h13c.825 0 1.5-.675 1.5-1.5v-13c0-.825-.675-1.5-1.5-1.5M11 2.5c0-.275.225-.5.5-.5h2c.275 0 .5.225.5.5v2c0 .275-.225.5-.5.5h-2a.5.5 0 0 1-.5-.5zM8 5a3.001 3.001 0 0 1 0 6a3.001 3.001 0 0 1 0-6m6 8.5c0 .275-.225.5-.5.5h-11a.5.5 0 0 1-.5-.5V7h1.1A5 5 0 0 0 8 13a5 5 0 0 0 4.9-6H14z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-twitter { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M16 3.538a6.5 6.5 0 0 1-1.884.516a3.3 3.3 0 0 0 1.444-1.816a6.6 6.6 0 0 1-2.084.797a3.28 3.28 0 0 0-2.397-1.034a3.28 3.28 0 0 0-3.197 4.028a9.32 9.32 0 0 1-6.766-3.431a3.284 3.284 0 0 0 1.015 4.381A3.3 3.3 0 0 1 .643 6.57v.041A3.28 3.28 0 0 0 3.277 9.83a3.3 3.3 0 0 1-1.485.057a3.29 3.29 0 0 0 3.066 2.281a6.6 6.6 0 0 1-4.862 1.359a9.3 9.3 0 0 0 5.034 1.475c6.037 0 9.341-5.003 9.341-9.341q0-.215-.009-.425a6.6 6.6 0 0 0 1.637-1.697z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-telegram { display: inline-block; width: 1.3em; height: 1.3em; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236d7586' d='M8 0C3.581 0 0 3.581 0 8s3.581 8 8 8s8-3.581 8-8s-3.581-8-8-8m3.931 5.484l-1.313 6.184c-.091.441-.356.544-.725.341l-2-1.478l-.959.934c-.112.109-.2.2-.4.2c-.259 0-.216-.097-.303-.344L5.55 9.084l-1.978-.616c-.428-.131-.431-.425.097-.634l7.706-2.975c.35-.159.691.084.556.625'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% 100%; background-color: currentColor; -webkit-mask-image: var(--svg); mask-image: var(--svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; color: #6d7586; } .ico-linkedin:focus { color: #6d7586; } .ico-facebook:focus { color: #6d7586; } .ico-youtube:focus { color: #6d7586; } .ico-instagram:focus { color: #6d7586; } .ico-twitter:focus { color: #6d7586; } .ico-telegram:focus { color: #6d7586; } .ico-linkedin:hover { color: #1e9fc4; } .ico-facebook:hover { color: #1e9fc4; } .ico-youtube:hover { color: #1e9fc4; } .ico-instagram:hover { color: #1e9fc4; } .ico-twitter:hover { color: #1e9fc4; } .ico-telegram:hover { color: #1e9fc4; } .footer-social-list { min-width: 6em; margin-top: 2.25rem; } .footer-social-list, .footer-social-list > li { display: inline-block; } .footer-social-list > li + li { margin-left: 1rem; } .footer-social-list > li > a { color: #6d7586; -webkit-transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out; } .footer-social-list > li > a:before { vertical-align: bottom; font-family: icomoon; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .footer-social-list > li > a:hover { border-color: #1e9fc4; } .footer-social-list > li > a:hover:before { color: #1e9fc4; } @media (max-width: 45.999em) { .footer-social-list { margin-top: 1rem; display: block; } } .footer-logo { max-width: 16em; } .fullscreen-video-container { position: fixed; top: 0px; left: 0px; object-fit: cover; width: 100%; height: 100%; } .fullscreen-video-container video { width: 100%; height: 100%; } @media (max-width: 46em) { .fullscreen-video-container { opacity: 1; transition: all 1s ease; height: 100%; z-index: -1; } .background-line-video { opacity: 0.1; background: var(--black);; background-image: linear-gradient(105deg, #1949A4, #00c3ff 20%, #3ff9ee); z-index: -1; } } .container-business { position: relative; width: 0px; height: 0px; background: #fff; border-radius: 25px; display: flex; justify-content: center; align-items: center; transition: 0.5s; transition-delay: 0.5s; top: -30px; left: 100px; } .container-business.active { width: 400px; height: 370px; transition-delay: 0.5s; z-index: 1; } @media (max-width: 64.999em) { .container-business.active { margin: 10px 10px 35px 10px; top: 0px; left: 0px; width: 100%; } } .container-business::before{ content: ''; position: absolute; bottom: -15px; width: 40px; height: 40px; background: #fff; border-radius: 5px; transform: rotate(45deg); opacity: 0; transition: 0.5s; } .container-business.active::before { opacity: 1; transition-delay: 0.5s; } .togglebtn{ position: absolute; min-width: 60px; height: 60px; background: #fff; bottom: -20px; border-radius: 50%; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.5s; } .container-business.active .togglebtn{ bottom: -90px; transform: rotate(135deg); background:#ff5a57; transition: 0.5s; } .togglebtn:hover { background: #040205; transition: 0.5s; } .togglebtn::before{ content: '+'; font-size: 2.5em; color:#fff; transition: 0.5s; } .togglebtn:hover::before{ color: #9800ce; transition: 0.5s; } .container-business.active .togglebtn.togglebtn:hover::before{ color: #040205; transition: 0.5s; } .container-business .content-business { min-width: 300px; padding: 10px; opacity: 0; transform: scale(0); transition: 0.5s; transition-delay: 0.5s; } .container-business.active .content-business { opacity: 1; transform: scale(1); transition-delay: 0.8s; } .container-business .content-business h2 { padding-bottom: 0px; top: 0; } .container-business .content-business p { padding: 0px; font-weight: bold; font-family: Helvetica; color: #040205; } .container-business .content-business button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #16a34a; border-radius: 5px; color: white; border: none; cursor: pointer; display: inline-block; height: 3em; line-height: 0em; padding: 0 1em; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.5); } .container-business .content-business button:hover { background-color: #17ac4e; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.5); } .container-business .content-business button:disabled  { background-color: #666; box-shadow: 0 5px 10px 0 rgba(4, 10, 41, 0.5); } .container-business .container-business-close { align-items: right; color: #111827; display: flex; height: 4.5em; justify-content: right; pointer-events: all; position: absolute; right: 0; top: 10px; bottom: 20px; width: 1.5em; cursor: pointer; z-index: 0; } .container-business .container-business-close svg { display: block; cursor: pointer; } .form-group { padding: 0px; } .form-group label { font-family: 'Mukta', sans-serif; font-size: 1em; } .form-control { padding: 0px; } .form-group button{ padding: 0px; } #TopButton { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: #fff; color: #040205; cursor: pointer; padding: 10px 15px 10px 15px; border-radius: 100px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); } #TopButton:hover { background-color: #bbbbbb; } #MiddleButton { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: #fff; color: #1E9FC4; cursor: pointer; padding: 15px; border-radius: 0px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); top: 50%; height: 60px; right: 0; -ms-transform: translateY(-50%); transform: translateY(-50%); } #MiddleButton:hover { background: linear-gradient(to right bottom, hsl(236, 50%, 50%), hsl(195, 50%, 50%)); } button span { max-width: 0; -webkit-transition: max-width 1s; transition: max-width 1s; display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; } button:hover span { max-width: 10rem; color: #fff; } @media (max-width: 64.999em) { button:hover span { max-width: 10rem; } } .loading-gif { max-width: 500px; } .pre-loader { position: fixed; z-index: 1000; top: 0; left: 0; background: white; display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; } .pre-loader.hidden { animation: fadeOut 2s; animation-fill-mode: forwards; } @keyframes fadeOut { 100% { opacity: 0; visibility: hidden; } } .tabs { position: relative; background: white; width: 100%; height: 100%; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); border-radius: 5px; min-width: 240px; color: #a2acbc; } .tabs input[name=tab-control] { display: none; } .tabs .content section h2, .tabs ul li label { cursor: pointer; color: #a2acbc; padding: 0 0 1rem; text-align: center; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; } .tabs .content section h2{ font-weight: 600; line-height: 1.5; margin-top: 0; font-weight: 500; margin-bottom: 0; } .tabs ul { list-style-type: none; padding-left: 0; display: flex; flex-direction: row; margin-bottom: 10px; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; } .tabs ul li { box-sizing: border-box; flex: 1; width: 25%; padding: 0 10px; -webkit-box-align: center; align-items: center; text-align: center; } .tabs ul li label { transition: all 0.3s ease-in-out; color: #929daf; padding: 5px auto; overflow: hidden; text-overflow: ellipsis; display: block; cursor: pointer; transition: all 0.2s ease-in-out; white-space: nowrap; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .tabs ul li label br { display: block; } .tabs ul li label svg { fill: #929daf; height: 3.2em; vertical-align: bottom; margin: 10px 0px 10px 0px; transition: all 0.2s ease-in-out; -webkit-transform: scale(1.2); transform: scale(1.2); } @media (max-width: 64.999em) { .tabs ul li label svg { fill: #929daf; height: 1.2em; vertical-align: bottom; margin-right: 0.2em; transition: all 0.2s ease-in-out; } } .tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active { outline: 0; color: #bec5cf; } .tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg { fill:#1E9FC4; } .tabs ul li label:hover{ color: #030021; } .tabs ul li label svg:hover{ color: #1E9FC4; } .tabs .slider { position: relative; width: 25%; transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07); } .tabs .slider .indicator { position: absolute; width: 100%; max-width: 100%; margin: 0 auto; height: 3px; background: #1E9FC4; border-radius: 1px; } .tabs .content { margin-top: 0px; animation: display 5s infinite; padding: 100px; } @media (max-width: 64.999em) { .tabs .content { padding: 0px; } } .tabs .content section { display: none; -webkit-animation-name: content; animation-name: content; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; line-height: 1.4; } .tabs .content section h2 { color: #428BFF; display: none; } .tabs .content section h2::after { content: ""; position: relative; display: block; width: 30px; height: 3px; background: #428BFF; margin-top: 5px; left: 1px; } .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { cursor: default; color: #030021; } .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg { fill: #1E9FC4; } @media (max-width: 600px) { .tabs input[name=tab-control]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label { background: rgba(0, 0, 0, 0.08); } } .tabs input[name=tab-control]:nth-of-type(1):checked ~ .slider { transform: translateX(55%); } .tabs input[name=tab-control]:nth-of-type(1):checked ~ .content > section:nth-child(1) { display: block; } .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { cursor: default; color: #030021; } .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg { fill: #1E9FC4; } @media (max-width: 600px) { .tabs input[name=tab-control]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label { background: rgba(0, 0, 0, 0.08); } } .tabs input[name=tab-control]:nth-of-type(2):checked ~ .slider { transform: translateX(150%); } .tabs input[name=tab-control]:nth-of-type(2):checked ~ .content > section:nth-child(2) { display: block; } .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { cursor: default; color: #030021; } .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg { fill: #1E9FC4; } @media (max-width: 600px) { .tabs input[name=tab-control]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label { background: rgba(0, 0, 0, 0.08); } } .tabs input[name=tab-control]:nth-of-type(3):checked ~ .slider { transform: translateX(250%); } .tabs input[name=tab-control]:nth-of-type(3):checked ~ .content > section:nth-child(3) { display: block; } @-webkit-keyframes content { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: translateY(0%); } } @keyframes content { from { opacity: 0; transform: translateY(5%); } to { opacity: 1; transform: translateY(0%); } } @media (max-width: 1000px) { .tabs ul li label { white-space: initial; } .tabs ul li label br { display: initial; } .tabs ul li label svg { height: 1.5em; } } @media (max-width: 600px) { .tabs ul li label { padding: 5px; border-radius: 5px; } .tabs ul li label span { display: none; } .tabs .slider { display: none; } .tabs .content { margin-top: 20px; } .tabs .content section h2 { display: block; } } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } .reveal { position: relative; transform: translateY(150px); opacity: 0; transition: all 2s ease; } .reveal.active { transform: translateY(0px); opacity: 1; } .reveal50px { position: relative; transform: translateY(50px); opacity: 0; transition: all 2s ease; } .reveal50px.active { transform: translateY(0px); opacity: 1; } .fadeInLeft { position: relative; transform: translateX(150px); opacity: 0; transition: all 0.5s ease; } .fadeInLeft.active { transform: translateX(0px); opacity: 1; } .fadeInRight { position: relative; transform: translateX(-150px); opacity: 0; transition: all 0.5s ease; } .fadeInRight.active { transform: translateX(0px); opacity: 1; } .fadeInTop { position: relative; transform: translateY(150px); opacity: 0; transition: all 0.5s ease; } .fadeInTop.active { transform: translateY(0px); opacity: 1; } .fadeInBottom { position: relative; transform: translateY(-150px); opacity: 0; transition: all 0.5s ease; } .fadeInBottom.active { transform: translateY(0px); opacity: 1; } @keyframes fa-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 0; } } .fa-blink { -webkit-animation: fa-blink .75s linear infinite; -moz-animation: fa-blink .75s linear infinite; -ms-animation: fa-blink .75s linear infinite; -o-animation: fa-blink .75s linear infinite; animation: fa-blink .75s linear infinite; transition: opacity 0.4s ease-in-out; animation-iteration-count: 1; } .form-dados{ padding: 0px; } .form-group.success input { border: 3px solid #4ECA64; } .form-group.error input { border: 3px solid #DB5A5A; } .form-group.error small{ color: #DB5A5A; visibility: visible; } .form-group small { visibility: hidden; position: absolute; margin-top: -5px; font-size: 13px; } @media (max-width: 64.999em) { .form-group small { width: auto; max-width: 100%; font-size: small; } } .form-group sucess { visibility: hidden; position: absolute; margin: 35px 0px 0px 150px; } .form-group sucess.ok { visibility: visible; opacity: 0; transition: all 2s ease; animation: 3s infinite alternate slidein; } @media (max-width: 64.999em) { .form-group sucess { width: auto; max-width: 100%; font-size: small; } } .form-group.error i.img-error { visibility: visible; } .form-group.success i.img-success { visibility: visible; } .form-group i { margin-top: 1.25rem; margin-left: -2rem; visibility: hidden; } @media (max-width: 64.999em) { .form-group i { left: 90%; } } .modal { display: flex; position: fixed; justify-content: center; align-items: center; height: 100%; padding: 2rem; top: 0; width: 100%; visibility: hidden; opacity: 0; transition: all 0.3s ease; background-color: rgba(47,54,68,0.7); animation: 3s infinite alternate slidein; z-index: 3000; overflow: auto; .modal-backdrop { background: rgba(#000, 0.7); height: 100%; width: 100%; position: fixed; } button { background: transparent; border: 0; color: #666; cursor: pointer; display: inline-block; font-size: 1rem; font-weight: bold; padding: 0 1rem; text-transform: uppercase; &:hover { color: #111; } &.open-modal { background: #000; border-radius: 5px; color: #fff; display: inline-block; margin: 1rem 0.5rem; padding: 1rem; } } .modal-content { background: #fff; border-radius: 5px; max-width: 600px; position: fixed; transition: all 0.6s ease; z-index: 2000; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; margin: 15% auto; padding: 10px; width: 90%; box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); } .modal-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc; padding: 1.5rem; .close-modal { font-size: 2rem; padding: 0; margin: 0; height: 30px; width: 30px; text-align: center; &:hover { color: #000; } } } .modal-body { padding: 1.5rem; } .modal-footer { border-top: 1px solid #ccc; padding: 1rem; text-align: right; } &.visible { opacity: 1; visibility: visible; .modal-content { top: 25%; } } } #toggle { display: block; width: 28px; height: 30px; padding-left: 1px; padding-top: 85px; padding-bottom: 100px; padding-right: 1px; position: absolute; right: 85px; } @media (min-width: 65em) { #toggle { display: none; } } @media (max-width: 65em) { #toggle { right: inherit; } } #toggle span:after, #toggle span:before { content: ""; position: absolute; left: 0; top: -9px; } #toggle span:after{ top: 9px; } #toggle span { position: relative; display: block; } #toggle span, #toggle span:after, #toggle span:before { width: 100%; height: 3px; background-color: #fff; transition: all 0.3s; backface-visibility: hidden; border-radius: 2px; } #toggle.on span { background-color: transparent; } #toggle.on span:before { transform: rotate(45deg) translate(5px, 5px); } #toggle.on span:after { transform: rotate(-45deg) translate(7px, -8px); } #toggle.on + #menu { opacity: 1; visibility: visible; } #menu { color: #999; width: 200px; height: 250px; text-align: center; border-radius: 4px; background: white; box-shadow: 0 1px 8px rgba(0,0,0,0.05); opacity: 0; visibility: hidden; transition: opacity .4s ease; top: 105px; padding-left: 1px; padding-top: 10px; padding-bottom: 100px; padding-right: 1px; position: absolute; right: 10px; } @media (min-width: 65em) { #menu { display: none; } } #menu:after { position: absolute; top: -15px; left: 95px; content: ""; display: block; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 20px solid white; } .menu-links ul, li, li a { list-style: none; display: block; margin: 0; padding: 0; } .menu-links li a { padding: 5px; color: #888; text-decoration: none; transition: all .2s; } .menu-links li a:hover, .menu-links li a:focus { background: #1E9FC4; color: #fff; } .textanimation { width: 15ch; animation: typing 4s steps(15), pulsetext .5s step-end infinite alternate; white-space: nowrap; overflow: hidden; border-right: 1px solid; font-size: 16px; margin: 0 auto; } @keyframes typing { from  { width: 0; } } @keyframes pulsetext { 50%  { border-color: transparent; } } .btn-whatsapp-pulse { background: #25d366; color: white; position: fixed; bottom: 20px; right: 20px; font-size: 40px; display: flex; justify-content: center; align-items: center; width: 0; height: 0; padding: 30px; text-decoration: none; border-radius: 50%; animation-name: pulse; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; z-index: 99; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); } 80% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } } .btn-whatsapp-pulse-border { bottom: 20px; right: 20px; animation-play-state: running; } .btn-whatsapp-pulse-border::before { content: ""; position: absolute; border-radius: 50%; padding: 30px; border: 5px solid #25d366; opacity: 0.75; animation-name: pulse-border; animation-duration: 1.5s; animation-timing-function: ease-out; animation-iteration-count: infinite; } @keyframes pulse-border { 0% { padding: 30px; opacity: 0.75; } 75% { padding: 60px; opacity: 0; } 100% { opacity: 0; } } .ico-whatsapp { width: 1em; height: 1em; background-repeat: no-repeat; background-size: 100% 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M13.641 2.325A7.87 7.87 0 0 0 8.032 0C3.663 0 .107 3.556.107 7.928c0 1.397.366 2.763 1.059 3.963L.041 16l4.203-1.103a7.9 7.9 0 0 0 3.787.966h.003c4.369 0 7.928-3.556 7.928-7.928a7.9 7.9 0 0 0-2.322-5.609zm-5.607 12.2a6.6 6.6 0 0 1-3.356-.919l-.241-.144l-2.494.653l.666-2.431l-.156-.25a6.54 6.54 0 0 1-1.009-3.506a6.6 6.6 0 0 1 6.594-6.591c1.759 0 3.416.688 4.659 1.931a6.55 6.55 0 0 1 1.928 4.662c-.003 3.637-2.959 6.594-6.591 6.594zm3.613-4.937c-.197-.1-1.172-.578-1.353-.644s-.313-.1-.447.1c-.131.197-.512.644-.628.778c-.116.131-.231.15-.428.05s-.838-.309-1.594-.984c-.588-.525-.987-1.175-1.103-1.372s-.013-.306.088-.403c.091-.088.197-.231.297-.347s.131-.197.197-.331c.066-.131.034-.247-.016-.347s-.447-1.075-.609-1.472c-.159-.388-.325-.334-.447-.341c-.116-.006-.247-.006-.378-.006s-.347.05-.528.247s-.694.678-.694 1.653s.709 1.916.809 2.05c.1.131 1.397 2.134 3.384 2.991c.472.203.841.325 1.128.419c.475.15.906.128 1.247.078c.381-.056 1.172-.478 1.338-.941s.166-.859.116-.941c-.047-.088-.178-.137-.378-.238z'/%3E%3C/svg%3E"); }