/* Variables * =============== * * All variables and most of the configuration is defined on this page. */ /*== Colors*/ /**/ /*## Gray and brand colors for use across theme.*/ /*== Scaffolding*/ /**/ /*## Settings for some of the most global styles.*/ /*** Background color for ``.*/ /*** Global text color on ``.*/ /*** Global textual link color.*/ /*** Link hover color set via `darken()` function.*/ /* 20/14*/ /*** By default, this inherits from the ``.*/ /* spacing */ /*== Buttons*/ /**/ /*## For each of Theme buttons, define text, background and border color.*/ /*== Overlays*/ /**/ /*## Color overlays over images on banner or image grid galleries*/ /* Fonts * =============== * * Place all your font declarations here */ .birth-error, .phone-error, .legal_name-error, .name-error { display: none; color: red; } @font-face { font-family: "FSLola"; src: url("../fonts/FS-Lola-Light.otf") format("opentype"); font-weight: 300; font-style: normal; } @font-face { font-family: "FSLola"; src: url("../fonts/FS-Lola-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; } @font-face { font-family: "FSLola"; src: url("../fonts/FS-Lola-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; } @font-face { font-family: "FSLola"; src: url("../fonts/FS-Lola-Bold.otf") format("opentype"); font-weight: 600; font-style: normal; } @font-face { font-family: "FSLola"; src: url("../fonts/FS-Lola-ExtraBold.otf") format("opentype"); font-weight: 700; font-style: normal; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; color: #000000; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } h3 { margin: 0; padding: 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: 800; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 90%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } .blocker { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: auto; z-index: 1; padding: 20px; box-sizing: border-box; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.75); text-align: center; } .blocker:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.05em; } .blocker.behind { background-color: transparent; } .modal { display: none; vertical-align: middle; position: relative; z-index: 2; box-sizing: border-box; width: 90%; height: auto; background: #fff; padding: 15px 30px; border-radius: 8px; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: left; } .modal a.close-modal { position: absolute; top: 15px; right: 15px; display: block; width: 30px; height: 30px; text-indent: -9999px; background-size: contain; background-repeat: no-repeat; background-position: center center; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg=="); } .modal-spinner { display: none; position: fixed; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); padding: 12px 16px; border-radius: 5px; background-color: #111; height: 20px; } .modal-spinner > div { border-radius: 100px; background-color: #fff; height: 20px; width: 2px; margin: 0 1px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .modal-spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .modal-spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .modal-spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.5); } 20% { -webkit-transform: scaleY(1); } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.5); -webkit-transform: scaleY(0.5); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } a { color: #000; font-weight: 500; text-decoration: underline; } a:hover, a:focus { color: #ab4701; text-decoration: underline; } .text-uppercase { text-transform: uppercase; } .text-blue { color: #163783; } figure { margin: 0; } /* Custom Grids * =============== * * Define all your custom grid declarations here */ .flex-row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .col { min-height: 1px; padding-left: 15px; padding-right: 15px; } /* Helpers * =============== * * Place all your helpers declarations here */ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } /* Text alignment*/ .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; } .error { border: 3px solid #d9534f !important; } #error-message, #email-match-error { margin-top: 5px; color: red; } .error-txt { padding: 0 20px; } .counter { margin-top: 12px; padding: 0 5px; font-size: 14px; color: red; } .count-otp { display: block; max-width: 280px; margin: 0 auto; } .screen-reader-text { border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important; white-space: nowrap !important; } .underline { text-decoration: underline; } .w-100 { width: 100%; } .m-0 { margin: 0; } .m-1 { margin: 0.25rem; } .m-2 { margin: 0.5rem; } .m-3 { margin: 1rem; } .m-4 { margin: 1.5rem; } .m-5 { margin: 2rem; } .mt-0 { margin: 0; } .mt-1 { margin: 0.25rem; } .mt-2 { margin: 0.5rem; } .mt-3 { margin: 1rem; } .mt-4 { margin: 1.5rem; } .mt-5 { margin: 2rem; } .form-window { border-radius: 24px; border: solid 3px #f8af1f; background: linear-gradient(to bottom, #f29300, #fff6ab 65%, #fcb731); } .form-window .form-content { border-radius: 32px; padding: 45px 24px; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; color: #000000; font-weight: bold; font-family: "FSLola", Arial, serif; } input[type=radio], input[type=checkbox] { margin: 4px 0 0; margin-top: 1px \9 ; line-height: normal; } input { display: inline-block; font-size: 1.375rem; font-weight: 600; min-height: 50px; color: #000000; text-indent: 0px; text-align: start; background-color: white; margin: 0; padding: 0.75rem; border: #cccccc 1px solid; } input[type=text] { border-radius: 8px; width: 100%; } input[type=text].error { border: #ff0000 1px solid; } .checkboxes label { display: block; clear: both; position: relative; font-weight: normal; font-size: 0.75rem; line-height: 0.85rem; padding-bottom: 5px; overflow: hidden; } .checkboxes label i, .checkboxes label span { display: block; float: left; vertical-align: center; padding: 0; margin: 0; } .checkboxes label i { width: 30px; height: 20px; } .checkboxes label span { line-height: 1.2rem; max-width: 90%; } .checkboxes label { display: block; clear: both; position: relative; font-weight: normal; font-size: 0.75rem; line-height: 0.85rem; padding-bottom: 5px; overflow: hidden; } .checkboxes label i, .checkboxes label span { display: block; float: left; vertical-align: center; padding: 0; margin: 0; } .checkboxes label i { width: 30px; height: 20px; } .checkboxes label i input { width: 20px; height: 20px; position: relative; top: -17px; } .checkboxes label span { line-height: 1.2rem; max-width: 90%; } /* Fonts * =============== * * Place all your font declarations here */ .container { max-width: 1200px; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; overflow: auto; } .container-fluid { padding-right: 0; padding-left: 0; } .form-window { overflow: auto; max-width: 662px; background-color: white; margin-left: auto; margin-right: auto; margin-bottom: 2rem; padding: 3px; border-radius: 24px; -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .form-window label { display: block; } .form-window button, .form-window .btn { display: inline-block; background-color: #010b6e; color: white; text-transform: uppercase; font-size: 1.25rem; font-weight: bold; font-family: "FSLola", Arial, serif; text-align: center; padding: 1.125rem; border: 0; letter-spacing: 1px; border-radius: 30px; text-decoration: none; } .form-window button[type=submit], .form-window .btn[type=submit] { width: 100%; } .form-window button.secondary, .form-window .btn.secondary { background-color: transparent; color: #010b6e; border: #010b6e 1px solid; } .form-window button[disabled=disabled], .form-window .btn[disabled=disabled] { background-color: #c3c3c3; color: #fff; border: #c3c3c3 1px solid; } .form-window .title h3 { color: #010b6e; font-size: 2rem; font-weight: 700; } .left { text-align: left; } .right { text-align: right; } .center { text-align: center; margin-left: 3rem; margin-right: 3rem; color: #000; } .justify { text-align: justify; } .hidden-sm { display: none; } .container { width: 90%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 33.75em) { .container { width: 80%; } } @media only screen and (min-width: 60em) { .container { width: 75%; max-width: 60rem; } } .row { position: relative; width: 100%; } .row [class^=col] { float: left; margin: 0.5rem 2%; min-height: 0.125rem; } .row::after { content: ""; display: table; clear: both; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 96%; } .col-1-sm { width: 4.3333333333%; } .col-2-sm { width: 12.6666666667%; } .col-3-sm { width: 21%; } .col-4-sm { width: 29.3333333333%; } .col-5-sm { width: 37.6666666667%; } .col-6-sm { width: 46%; } .col-7-sm { width: 54.3333333333%; } .col-8-sm { width: 62.6666666667%; } .col-9-sm { width: 71%; } .col-10-sm { width: 79.3333333333%; } .col-11-sm { width: 87.6666666667%; } .col-12-sm { width: 96%; } @media only screen and (min-width: 45em) { .col-1 { width: 4.3333333333%; } .col-2 { width: 12.6666666667%; } .col-3 { width: 21%; } .col-4 { width: 29.3333333333%; } .col-5 { width: 37.6666666667%; } .col-6 { width: 46%; } .col-7 { width: 54.3333333333%; } .col-8 { width: 62.6666666667%; } .col-9 { width: 71%; } .col-10 { width: 79.3333333333%; } .col-11 { width: 87.6666666667%; } .col-12 { width: 96%; } .hidden-sm { display: block; } } html { font-size: 16px; } body { background-color: #101a64; font-family: "FSLola", Arial, serif; font-size: 16px; font-weight: normal; line-height: normal; min-height: 1270px; } /* Header * =============== * */ header { background-color: #0020b1; height: 112px; text-align: center; } header h1 { display: inline-block; padding: 0; margin-top: 24px; width: 89px; height: 64px; background-size: contain; overflow: hidden; text-indent: -1000px; background-image: url("../images/logo-assai.png"); } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { header h1 { background-image: url("../images/logo-assai@2x.png"); } } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) { header h1 { background-image: url("../images/logo-assai@3x.png"); } } @media screen and (min-width: 1200px) { header { height: 130px; } header h1 { margin-top: 24px; width: 120px; height: 86px; background-image: url("../images/logo-assai@2x.png"); } } /* Footer * =============== * */ footer .terms { min-height: 86px; background-color: #0020b1; text-align: center; padding-top: 15px; padding-bottom: 5px; } footer .terms p { display: inline-block; max-width: 660px; text-align: justify; color: #ffffff; opacity: 0.83; font-size: 0.75rem; font-family: "Open Sans", sans-serif; line-height: 1.5; letter-spacing: -0.1px; } footer .copy { background-color: #010b6e; text-align: center; } footer .copy p { display: inline-block; color: #ffffff; padding: 0.75rem; font-family: "Open Sans", sans-serif; font-size: 0.5rem; font-weight: 600; text-transform: uppercase; margin: 0; } /* 1200x1920 kiosk. Both bands have a fixed height because the content-area * calculation in src/frontend/js/layout.js subtracts the footer from the * viewport height: 1920 - 130 (header) - 129 - 61 = 1600. * * The body text stays at 1rem, not at 1.5x the 800px layout's 0.75rem: * with a max-width of 990px the paragraph fits in 3 lines (4 in the worst * case), which fits within the 129px. At 1.125rem four lines would exceed * 129px and spill over the copyright band. */ @media screen and (min-width: 1200px) { footer .terms { min-height: 129px; padding-top: 22px; padding-bottom: 8px; } footer .terms p { max-width: 990px; font-size: 1rem; } footer .copy { height: 61px; } footer .copy p { padding: 0; font-size: 0.75rem; line-height: 61px; } } /* Home * =============== * * Place all your home page declarations here */ .content { background-color: #003cfd; background: linear-gradient(to bottom, #0068dc, #000465); max-height: 1049px; } .content.apps { background-image: initial; } /* The 1049px max-height above is the usable height of the 800x1280 kiosk * (1280 - 112 header - 119 footer) and applies to every screen, not just the * home page. On the 1200x1920 kiosk it clipped the wrapper at 1049px while * the content kept going to 1600px, and the overflow got painted on top of * the footer. adjustContentHeight() in src/frontend/js/layout.js is what * controls the height there. */ @media screen and (min-width: 1200px) { .content { max-height: none; } } #home { text-align: center; overflow: hidden; position: relative; background-image: url("../images/home/home-gradient.jpg"); background-repeat: no-repeat; background-size: auto 1049px; background-position: top center; height: 1049px; width: 100%; } #home .party-img { position: absolute; bottom: 0; padding-top: 17px; } @media screen and (min-width: 1200px) { #home { background-size: cover; background-image: url(../images/home/home-gradient-a7.jpg); /* min-height, not height: adjustContentHeight() writes an inline * min-height with the measured usable height, and an inline value beats * CSS, but it would never beat a fixed `height`. The 1600px is the * fallback for 1920 - 130 (header) - 190 (footer) for before the JS runs. */ height: auto; min-height: 1600px; } #home .party-img img { width: 1180px; height: auto; } } #home .title { padding-top: 1.3rem; } #home .title h3 { display: block; color: #ffdd00; font-size: 2rem; font-weight: bold; margin-bottom: 1.5rem; padding: 0; } @media screen and (min-width: 1200px) { #home .title { padding-top: 14rem; } #home .title h3 { font-size: 3.5rem; } } #home .text { margin-top: 0; } #home .text p { display: block; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.25rem; color: white; } @media screen and (min-width: 1200px) { #home .text p { max-width: 800px; font-size: 2.1rem; line-height: 2.8rem; } #home .text p img { width: 2.813rem; height: 2.813rem; } } #home .text p.text-prize { padding: 0 20px; } #home .text p.smaller { font-size: 1.25rem; padding: 0 20px; } #home .text p .highlight { color: #fcb914; } @media screen and (min-width: 1200px) { #home .text p { font-size: 2rem; } } #home .cta { text-align: center; } #home .cta a { margin-top: 2rem; margin-bottom: 1rem; display: inline-block; width: 407px; height: 77px; background: url("../images/home/btn-cadastre-se@2x.png") no-repeat; background-size: contain; overflow: hidden; text-indent: -1000px; } @media screen and (min-width: 1200px) { #home .cta a { margin-top: 3.5rem; margin-bottom: 2rem; width: 611px; height: 116px; } } .home { position: relative; } @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) { #home .cta a { background-image: url("../images/home/btn-cadastre-se@3x.png"); } } .home.w800 .party-img { position: absolute; bottom: 0; padding-top: 17px; } .home.w1200 .party-img img { width: 1180px; height: auto; } .home.w800 .title { padding-top: 6.18rem; } .home.w800 .title h3 { display: block; color: #ffffff; font-size: 2.5rem; font-weight: bold; margin-bottom: 2.5rem; padding: 0; } .home.w1200 .title { padding-top: 14rem; } .home.w1200 .title h3 { font-size: 3.5rem; } .home.w800 .text p { display: block; max-width: 600px; margin-left: auto; margin-right: auto; font-size: 1.25rem; color: white; } .home.w1200 .text p { display: block; max-width: 600px; margin-left: auto; margin-right: auto; color: white; font-size: 2rem; } .home.w800 .cta a { width: 468px; height: 100px; margin-top: 2rem; } .logo-index { background-size: cover; margin-top: 2.5rem; } .logo-index img { width: 225px; height: 234px; } @media screen and (min-width: 1200px) { .logo-index { margin-top: 3rem; } .logo-index img { width: 338px; height: 353px; } } .cell { background-color: #001989; display: block; margin-left: auto; margin-right: auto; border-bottom: #fcb914 8px solid; } .cell .text { max-width: 420px; margin-top: 120px; margin-left: auto; margin-right: auto; text-align: center; } .cell .image { margin-left: -50px; padding-top: 55px; text-align: center; } .cell h3 { color: #fcb914; font-size: 2.5rem; font-weight: 600; padding-top: 4rem; margin-bottom: 1rem; } .cell h4 { color: white; font-size: 2rem; font-weight: 400; } .cell h4 strong { color: #fcb914; } #apps { text-align: center; background-image: linear-gradient(to bottom, #9a119f, #001989); height: inherit; } #apps .title { color: white; padding-top: 40px; } #apps h3 { font-size: 2rem; font-weight: 500; } #apps h4 { font-size: 2rem; font-weight: 400; } #apps .code { display: flex; justify-content: center; align-content: center; } #apps .code > div { padding: 20px; } #apps .codes .qrcode { background: white; width: 225px; height: 225px; margin-bottom: 50px; } #apps .cta { text-align: center; padding-top: 40px; } #apps .cta a { display: inline-block; width: 300px; height: 74px; background: url("../images/apps/btn-continuar-aqui@2x.png") no-repeat; background-size: contain; overflow: hidden; text-indent: -1000px; } #document { overflow: auto; } #document .form-window { position: relative; margin-top: 180px; } #document .form-window label { color: #010b6e; margin-bottom: 0.4rem; } #document .form-window button[type=submit] { margin-top: 1.6rem; margin-bottom: 2rem; } #document .form-window small { display: block; text-align: center; font-weight: 400; font-size: 0.875rem; } #document .form-window small a { font-weight: 600; text-decoration: underline; } #enrollment { overflow: auto; } #enrollment .form-window { margin-top: 2rem; } #enrollment .form-window p { margin-top: 0.7rem; font-weight: 500; } #enrollment .form-window .optional { color: #6b6b6b; } #enrollment .form-window button[type=submit] { margin-top: 2rem; margin-bottom: 2rem; } #enrollment .form-window small { display: block; text-align: center; font-weight: 600; } .form-content .row { margin-left: auto; margin-right: auto; } #code { overflow: auto; } #code .form-window { margin-top: 180px; } #code .form-window .title { margin-top: 3rem; margin-bottom: 1.2rem; } #code .form-window .title h3 { margin-bottom: 1.2rem; } #code .form-window small { margin-top: 1.3rem; display: block; text-align: center; font-weight: 600; } #input-code { overflow: auto; } #input-code .form-window { position: relative; overflow: initial; margin-top: 180px; } #input-code .form-window .title { margin-top: 3rem; margin-bottom: 1rem; } #input-code .form-window .title h3 { margin-bottom: 1rem; } #input-code .form-window .row { margin-left: auto; margin-right: auto; } #input-code h4 { font-size: 1.5rem; color: #163783; text-align: center; font-weight: bold; } #input-code .form-window .pincode { margin-bottom: 1rem; text-align: center; letter-spacing: 5px; font-weight: bold; color: #163783; } #input-code .form-window p { font-size: 1rem; font-weight: 500; } #input-code .form-window button[type=submit] { margin-top: 1rem; margin-bottom: 1rem; } #input-code .form-window small { display: block; text-align: center; font-weight: 600; } #input-code .form-window:before { width: 90%; text-align: right; color: white; font-weight: 500; font-size: 1.125rem; } #pin { overflow: auto; } #pin .form-window { margin-top: 180px; } #pin .form-window .title { margin-top: 3rem; margin-bottom: 1.2rem; } #pin .form-window .title h3 { margin-bottom: 1.2rem; } #pin .form-window .pincode { margin-bottom: 1rem; text-align: center; letter-spacing: 5px; font-weight: bold; color: #163783; } #pin .form-window button[type=submit] { margin-top: 0.5rem; margin-bottom: 1rem; } #pin .form-window small { display: block; text-align: center; font-weight: 600; } /* Spinner Submmit */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #f3f3f3; border-top: 2px solid #333; border-radius: 50%; animation: spin 1s linear infinite; margin-right: 8px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } #submitBtn:disabled { opacity: 0.7; cursor: not-allowed; } button[type=submit]:disabled { pointer-events: none; opacity: 0.6; } .submit-loader { pointer-events: none; } /*# sourceMappingURL=style.css.map */