@import url('https://fonts.googleapis.com/css?family=Fira+Sans:600|Lato:400&display=swap'); html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } /*-------------------------------------------------------------- # Login --------------------------------------------------------------*/ #loginForm { padding: 40px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: #000000; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; } pre { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } b, strong { font-weight: inherit; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } dfn { font-style: italic; } mark { background-color: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } audio, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } img { border-style: none; } svg:not(:root) { overflow: hidden; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { display: inline-block; vertical-align: baseline; } textarea { overflow: auto; } [type='checkbox'], [type='radio'] { box-sizing: border-box; padding: 0; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } [type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details, menu { display: block; } summary { display: list-item; } canvas { display: inline-block; } template { display: none; } [hidden] { display: none; } @media (min-width: 641px) { .has-animations [class*='reveal-'] { opacity: 0; will-change: opacity, transform; } .has-animations .reveal-from-top { transform: translateY(-10px); } .has-animations .reveal-from-bottom { transform: translateY(10px); } .has-animations .reveal-from-left { transform: translateX(-10px); } .has-animations .reveal-from-right { transform: translateX(10px); } .has-animations .reveal-scale-up { transform: scale(0.95); } .has-animations .reveal-scale-down { transform: scale(1.05); } .has-animations .reveal-rotate-from-left { transform: perspective(1000px) rotateY(-45deg); } .has-animations .reveal-rotate-from-right { transform: perspective(1000px) rotateY(45deg); } .has-animations.is-loaded [class*='reveal-'] { transition: opacity 1s cubic-bezier(0.39, 0.575, 0.565, 1), transform 1s cubic-bezier(0.39, 0.575, 0.565, 1); } .has-animations.is-loaded [class*='reveal-'].is-revealed { opacity: 1; transform: translate(0); } } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { /* background: #16171b; */ background: linear-gradient(to left, #171717, #000000); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } hr { border: 0; display: block; height: 1px; background: #292b32; margin-top: 24px; margin-bottom: 24px; } ul, ol { margin-top: 0; padding-left: 24px; } ul:not(:last-child), ol:not(:last-child) { margin-bottom: 24px; } ul { list-style: disc; } ol { list-style: decimal; } li:not(:last-child) { margin-bottom: 12px; } li > ul, li > ol { margin-top: 12px; margin-bottom: 0; } dl { margin-top: 0; margin-bottom: 24px; } dt { font-weight: 700; } dd { margin-left: 24px; margin-bottom: 24px; } img { border-radius: 2px; } img, svg, video { display: block; height: auto; max-width: 100%; } figure { margin: 48px 0; } figcaption { padding: 8px 0; } table { font-size: 16px; line-height: 24px; letter-spacing: -0.1px; border-collapse: collapse; margin-bottom: 24px; width: 100%; } tr { border-bottom: 1px solid #292b32; } th { font-weight: 700; text-align: left; } th, td { padding: 8px 16px; } th:first-child, td:first-child { padding-left: 0; } th:last-child, td:last-child { padding-right: 0; } .invert-color hr { display: block; height: 1px; background: #e5e9ff; } .invert-color tr { border-bottom: 1px solid #e5e9ff; } html { font-size: 20px; line-height: 32px; letter-spacing: -0.1px; } body { color: #959cb1; font-size: 1rem; } body, button, input, select, textarea { font-family: 'Lato', sans-serif; font-weight: 400; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Fira Sans', sans-serif; font-weight: 600; clear: both; color: #f9faff; word-wrap: break-word; overflow-wrap: break-word; } h1, .h1 { font-size: 38px; line-height: 48px; } h2, .h2 { font-size: 32px; line-height: 42px; } h3, .h3 { font-size: 24px; line-height: 34px; letter-spacing: -0.1px; } h4, .h4 { font-size: 24px; line-height: 34px; letter-spacing: -0.1px; } h5, .h5 { font-size: 20px; line-height: 32px; letter-spacing: -0.1px; } h6, .h6, small, .text-sm { font-size: 18px; line-height: 30px; letter-spacing: -0.1px; } .text-xs { font-size: 16px; line-height: 24px; letter-spacing: -0.1px; } .text-xxs { font-size: 14px; line-height: 22px; } figcaption { font-size: 14px; line-height: 22px; } a:not(.button) { color: inherit; } a:not(.button):hover, a:not(.button):active { color: #f9faff; outline: 0; } a.button-link { color: #6a6f82; } a.button-link:hover, a.button-link:active { color: #959cb1; } a.func-link { color: #376df9; } a.func-link:hover, a.func-link:active { color: #6991fa; } h1, .h1 { margin-top: 48px; margin-bottom: 32px; } h2, .h2 { margin-top: 48px; margin-bottom: 32px; } h3, .h3 { margin-top: 36px; margin-bottom: 24px; } h4, h5, h6, .h4, .h5, .h6 { margin-top: 24px; margin-bottom: 24px; } p { margin-top: 0; margin-bottom: 24px; } dfn, cite, em, i { font-style: italic; } blockquote { font-size: 20px; line-height: 32px; letter-spacing: -0.1px; margin-top: 24px; margin-bottom: 24px; margin-left: 24px; } blockquote::before { content: '\201C'; } blockquote::after { content: '\201D'; } blockquote p { display: inline; } address { border-width: 1px 0; border-style: solid; border-color: #292b32; padding: 24px 0; margin: 0 0 24px; } pre, pre h1, pre h2, pre h3, pre h4, pre h5, pre h6, pre .h1, pre .h2, pre .h3, pre .h4, pre .h5, pre .h6 { font-family: 'Courier 10 Pitch', Courier, monospace; } pre, code, kbd, tt, var { background: #0d0d10; } pre { font-size: 16px; line-height: 24px; letter-spacing: -0.1px; max-width: 100%; overflow: auto; padding: 24px 24px; margin-top: 24px; margin-bottom: 24px; } code, kbd, tt, var { font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; padding: 2px 4px; } abbr, acronym { cursor: help; } mark, ins { text-decoration: none; } b, strong { font-weight: 700; } .invert-color { color: #6a6f82; } .invert-color a:not(.button):hover, .invert-color a:not(.button):active { color: #1c1d22; outline: 0; } .invert-color a.button-link:hover, .invert-color a.button-link:active { color: #376df9; } .invert-color a.func-link:hover, .invert-color a.func-link:active { color: #6991fa; } .invert-color h1, .invert-color h2, .invert-color h3, .invert-color h4, .invert-color h5, .invert-color h6, .invert-color .h1, .invert-color .h2, .invert-color .h3, .invert-color .h4, .invert-color .h5, .invert-color .h6 { color: #16171b; } .invert-color address { border-color: #e5e9ff; } .invert-color pre, .invert-color code, .invert-color kbd, .invert-color tt, .invert-color var { background: #0d0d10; } @media (max-width: 640px) { .h1-mobile { font-size: 38px; line-height: 48px; } .h2-mobile { font-size: 32px; line-height: 42px; } .h3-mobile { font-size: 24px; line-height: 34px; letter-spacing: -0.1px; } .h4-mobile { font-size: 24px; line-height: 34px; letter-spacing: -0.1px; } .h5-mobile { font-size: 20px; line-height: 32px; letter-spacing: -0.1px; } .h6-mobile { font-size: 18px; line-height: 30px; letter-spacing: -0.1px; } } @media (min-width: 641px) { h1, .h1 { font-size: 44px; line-height: 54px; } h2, .h2 { font-size: 38px; line-height: 48px; } h3, .h3 { font-size: 32px; line-height: 42px; } } .container, .container-sm, .container-xs { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px; } @media (min-width: 481px) { .container, .container-sm, .container-xs { padding-left: 24px; padding-right: 24px; } } .container { max-width: 1128px; } .container-sm { max-width: 944px; } .container-xs { max-width: 668px; } [class*='container'] [class*='container'] { padding-left: 0; padding-right: 0; } [class*='container'] .container-sm { max-width: 896px; } [class*='container'] .container-xs { max-width: 620px; } .button { display: inline-flex; font-size: 14px; line-height: 22px; font-weight: 700; padding: 12px 31px; height: 48px; text-decoration: none !important; text-transform: uppercase; color: #6a6f82; background-color: #f9faff; border-width: 1px; border-style: solid; border-color: rgba(0, 0, 0, 0); border-radius: 2px; cursor: pointer; justify-content: center; text-align: center; letter-spacing: inherit; white-space: nowrap; transition: background 0.15s ease; } .button:active { outline: 0; } .button:hover { background-color: #fff; } .button.is-loading { position: relative; color: transparent !important; pointer-events: none; } .button.is-loading::after { content: ''; display: block; position: absolute; width: 22px; height: 22px; margin-left: -11px; margin-top: -11px; top: 50%; left: 50%; border: 2px solid #6a6f82; border-radius: 50%; border-right-color: transparent !important; border-top-color: transparent !important; z-index: 1; -webkit-animation: button-loading 0.6s infinite linear; animation: button-loading 0.6s infinite linear; } .button[disabled] { cursor: not-allowed; color: #16171b; background-color: #292b32 !important; } .button[disabled].is-loading::after { border-color: #16171b; } .button-sm { padding: 6px 23px; height: 36px; } .button-dark { color: #f9faff; background-color: #292b32; } .button-dark:hover { background-color: #30323a; } .button-dark.is-loading::after { border-color: #f9faff; } .button-primary { color: #f9faff; background-color: #376df9; } .button-primary:hover { background-color: #4678f9; } .button-primary.is-loading::after { border-color: #f9faff; } .button-secondary { color: #f9faff; background-color: #ff5fa0; } .button-secondary:hover { background-color: #ff6ea9; } .button-secondary.is-loading::after { border-color: #f9faff; } .button-block { display: flex; width: 100%; } .button-group { display: flex; flex-wrap: wrap; align-items: center; margin-right: -8px; margin-left: -8px; margin-top: -8px; } .button-group:last-of-type { margin-bottom: -8px; } .button-group:not(:last-of-type) { margin-bottom: 8px; } .button-group > [class*='button'] { margin: 8px; } @media (max-width: 640px) { .button-wide-mobile { width: 100%; max-width: 280px; } } @-webkit-keyframes button-loading { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes button-loading { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } fieldset { padding: 0; margin: 0; border: 0; } .form-label, .form-switch { color: #6a6f82; font-weight: 500; } .form-label { font-size: 14px; line-height: 22px; } .form-input, .form-select, .form-checkbox input, .form-radio input { -moz-appearance: none; -webkit-appearance: none; background-color: #f9faff; border-width: 1px; border-style: solid; border-color: #16171b; } .form-input:hover, .form-select:hover, .form-checkbox input:hover, .form-radio input:hover { border-color: #6a6f82; } .form-input:active, .form-input:focus, .form-select:active, .form-select:focus, .form-checkbox input:active, .form-checkbox input:focus, .form-radio input:active, .form-radio input:focus { outline: none; border-color: #376df9; } .form-input[disabled], .form-select[disabled], .form-checkbox input[disabled], .form-radio input[disabled] { cursor: not-allowed; background-color: #292b32; border-color: #1c1d22; } .form-input.form-error, .form-select.form-error, .form-checkbox input.form-error, .form-radio input.form-error { border-color: #ff5fa0; } .form-input.form-warning, .form-select.form-warning, .form-checkbox input.form-warning, .form-radio input.form-warning { border-color: #ffc55a; } .form-input.form-success, .form-select.form-success, .form-checkbox input.form-success, .form-radio input.form-success { border-color: #1ec198; } .form-input, .form-select { display: block; font-size: 16px; line-height: 24px; letter-spacing: -0.1px; padding: 11px 15px; height: 48px; border-radius: 0; color: #16171b; box-shadow: none; max-width: 100%; width: 100%; } .form-input::-webkit-input-placeholder { color: #959cb1; } .form-input::-moz-placeholder { color: #959cb1; } .form-input:-ms-input-placeholder { color: #959cb1; } .form-input::-ms-input-placeholder { color: #959cb1; } .form-input::placeholder { color: #959cb1; } .form-input::-ms-input-placeholder { color: #959cb1; } textarea.form-input { height: auto; resize: vertical; } .form-select { padding-right: 46px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206%208%2011.4z%22%20fill%3D%22%23F9FAFF%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E'); background-position: right 15px center; background-repeat: no-repeat; background-size: 16px 16px; } .form-select-sm { padding-right: 38px; background-position: right 11px center; } .form-select-sm, .form-input-sm { padding: 5px 11px; height: 36px; } .has-icon-left, .has-icon-right { position: relative; } .has-icon-left svg, .has-icon-right svg { pointer-events: none; position: absolute; top: 50%; transform: translateY(-50%); } .has-icon-left .form-input { padding-left: 46px; } .has-icon-left .form-input + svg { left: 15px; } .has-icon-left .form-input-sm { padding-left: 38px; } .has-icon-left .form-input-sm + svg { left: 11px; } .has-icon-right .form-input { padding-right: 46px; } .has-icon-right .form-input + svg { right: 15px; } .has-icon-right .form-input-sm { padding-right: 38px; } .has-icon-right .form-input-sm + svg { right: 11px; } .form-checkbox, .form-radio, .form-switch { font-size: 16px; line-height: 24px; letter-spacing: -0.1px; cursor: pointer; } .form-checkbox, .form-radio { color: #959cb1; } .form-checkbox, .form-radio { position: relative; padding-left: 24px; } .form-checkbox input, .form-radio input { position: absolute; left: 0; top: 3px; width: 16px; height: 16px; cursor: pointer; } .form-checkbox input:checked, .form-radio input:checked { background-color: #376df9 !important; border-color: #376df9 !important; background-position: 50%; } .form-checkbox input { border-radius: 2px; } .form-checkbox input:checked { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+IDxwYXRoIGQ9Ik0xMS40IDVMMTAgMy42bC00IDQtMi0yTDIuNiA3IDYgMTAuNHoiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); } .form-radio input { border-radius: 50%; } .form-radio input:checked { background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBmaWxsPSIjRkZGIiBjeD0iNyIgY3k9IjciIHI9IjMiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==); } .form-switch { display: inline-flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .form-switch input { clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; } .form-switch .form-switch-icon { display: block; position: relative; min-width: 60px; width: 60px; height: 32px; border-radius: 16px; background: #292b32; } .form-switch .form-switch-icon::before { content: ''; display: block; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: 14px; background: #f9faff; transition: all 0.15s ease-out; } .form-switch input:checked + .form-switch-icon { background: #376df9; } .form-switch input:checked + .form-switch-icon::before { left: 30px; } .form-switch > span:not(.form-switch-icon) { order: -1; margin-right: 12px; } .form-switch > span:not(.form-switch-icon):last-child { order: initial; margin-left: 12px; margin-right: 0; } .invert-color .form-label, .invert-color .form-switch { color: #292b32; } .invert-color .form-input, .invert-color .form-select, .invert-color .form-checkbox input, .invert-color .form-radio input { border-color: #e5e9ff; } .invert-color .form-input:active, .invert-color .form-input:focus, .invert-color .form-select:active, .invert-color .form-select:focus, .invert-color .form-checkbox input:active, .invert-color .form-checkbox input:focus, .invert-color .form-radio input:active, .invert-color .form-radio input:focus { border-color: #376df9; } .invert-color .form-input[disabled], .invert-color .form-select[disabled], .invert-color .form-checkbox input[disabled], .invert-color .form-radio input[disabled] { background-color: #e5e9ff; } .invert-color .form-input, .invert-color .form-select { color: #292b32; } .invert-color .form-select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%2011.4L2.6%206%204%204.6l4%204%204-4L13.4%206%208%2011.4z%22%20fill%3D%22%23292B32%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E'); } .invert-color .form-checkbox, .invert-color .form-radio { color: #292b32; } .invert-color .form-checkbox input:checked, .invert-color .form-radio input:checked { /*background-color: !important;*/ /*border-color: !important*/ } .form-group { display: flex; } .form-group .form-input { flex-grow: 1; flex-shrink: 1; margin-right: 12px; } .form-group .button { padding-left: 24px; padding-right: 24px; flex-shrink: 0; } .form-hint { font-size: 14px; line-height: 22px; margin-top: 8px; } @media (max-width: 640px) { .form-group-desktop .form-input { margin-bottom: 12px; } .form-group-desktop .button { width: 100%; } } @media (min-width: 641px) { .form-group-desktop { display: flex; } .form-group-desktop .form-input { flex-grow: 1; flex-shrink: 1; margin-right: 12px; } .form-group-desktop .button { padding-left: 24px; padding-right: 24px; flex-shrink: 0; } } .header-nav-toggle { background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer; } .hamburger, .hamburger-inner { display: block; pointer-events: none; } .hamburger { position: relative; width: 24px; height: 24px; } .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 24px; height: 2px; position: absolute; background: #959cb1; } .invert-color .hamburger-inner, .invert-color .hamburger-inner::before, .invert-color .hamburger-inner::after { background: #1c1d22; } .hamburger-inner { top: 50%; margin-top: -1px; transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger-inner::before, .hamburger-inner::after { content: ''; display: block; } .hamburger-inner::before { top: -7px; transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger-inner::after { bottom: -7px; transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19), width 0.1s 0.25s ease-in; } .off-nav-is-active .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .off-nav-is-active .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .off-nav-is-active .hamburger-inner::after { width: 24px; bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.1s ease-out; } .accordion li { position: relative; } .accordion li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } .accordion li:last-of-type { position: relative; } .accordion li:last-of-type::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } .invert-color .accordion li { position: relative; } .invert-color .accordion li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #e5e9ff; } .invert-color .accordion li:last-of-type { position: relative; } .invert-color .accordion li:last-of-type::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #e5e9ff; } .accordion-header { display: flex; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; cursor: pointer; } .accordion-header span { width: calc(100% - (16px * 2)); } .accordion-content { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.15s ease-in-out, opacity 0.15s; } .is-active .accordion-content { opacity: 1; } .accordion-content p:last-child { margin-bottom: 24px; } .accordion-icon { position: relative; width: 16px; height: 16px; } .accordion-icon::before, .accordion-icon::after { content: ''; position: absolute; background: #376df9; transition: transform 0.25s ease-out; } .accordion-icon::before { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; } .accordion-icon::after { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; } .is-active .accordion-icon { cursor: pointer; } .is-active .accordion-icon::before { transform: rotate(90deg); } .is-active .accordion-icon::after { transform: rotate(180deg); } .modal, .modal::before { bottom: 0; left: 0; right: 0; top: 0; } .modal { display: none; align-items: center; flex-direction: column; justify-content: center; overflow: hidden; position: fixed; z-index: 40; } .modal.modal-video .modal-inner { padding: 0; max-width: 1024px; } .modal::before, .modal .modal-inner { display: none; } .modal::before { content: ''; position: absolute; background-color: rgba(22, 23, 27, 0.88); } .modal.is-active { display: flex; } .modal.is-active::before, .modal.is-active .modal-inner { display: block; } .modal.is-active .modal-inner { -webkit-animation: slideUpInModal 0.15s ease-in-out both; animation: slideUpInModal 0.15s ease-in-out both; } .modal.is-active::before { -webkit-animation: slideUpInModalBg 0.15s ease-in-out both; animation: slideUpInModalBg 0.15s ease-in-out both; } .modal-inner { max-height: calc(100vh - 16px * 2); overflow: auto; position: relative; width: calc(100% - (16px * 2)); max-width: 480px; margin-left: 16px; margin-right: 16px; background: #292b32; } .modal-content { padding: 48px 16px; } .modal-close { background: transparent; border: 0; outline: 0; padding: 0; cursor: pointer; position: absolute; right: 24px; top: 24px; width: 16px; height: 16px; } .modal-close::before, .modal-close::after { content: ''; display: block; position: absolute; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; width: 16px; height: 2px; background: #6a6f82; } .modal-close::before { transform: rotate(225deg); } .modal-close::after { transform: rotate(-45deg); } .modal-close:hover::before, .modal-close:hover::after { background: #959cb1; } @media (min-width: 641px) { .modal-inner { margin: 0 auto; max-height: calc(100vh - 48px * 2); } .modal-content { padding-top: 48px; padding-bottom: 48px; padding-left: 32px; padding-right: 32px; } } @-webkit-keyframes slideUpInModal { 0% { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUpInModal { 0% { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideUpInModalBg { 0% { opacity: 0; } to { opacity: 1; } } @keyframes slideUpInModalBg { 0% { opacity: 0; } to { opacity: 1; } } .carousel-item { display: none; } .carousel-item.is-loading:not(.is-active) { display: block; position: absolute; visibility: hidden; opacity: 0; } .carousel-item.is-active { display: block; } .carousel-bullets { display: inline-flex; } .carousel-bullet { display: block; position: relative; width: 20px; height: 20px; padding: 0; cursor: pointer; line-height: 0; border: none; background: transparent; } .carousel-bullet::before { content: ''; position: absolute; left: 6px; top: 6px; background: #292b32; width: 8px; height: 8px; border-radius: 50%; transition: background 0.25s ease; } .carousel-bullet:focus { outline: none; } .carousel-bullet.is-active::before { background: #6a6f82; } .carousel-bullet:hover::before { background: #959cb1; } .invert-color .carousel-bullet::before { background: #6a6f82; } .invert-color .carousel-bullet.is-active::before { background: #292b32; } .invert-color .carousel-bullet:hover::before { background: #376df9; } .split-wrap { margin-top: -24px; } .split-wrap:last-of-type { margin-bottom: -24px; } .split-wrap:not(:last-of-type) { margin-bottom: 24px; } .split-wrap .split-item { padding-top: 24px; padding-bottom: 24px; display: flex; flex-direction: column; } .split-wrap .split-item .split-item-image { position: relative; width: 100%; } .split-wrap .split-item .split-item-image img, .split-wrap .split-item .split-item-image svg, .split-wrap .split-item .split-item-image video { width: auto; height: auto; max-width: 100%; overflow: visible; } .split-wrap .split-item .split-item-image.split-item-image-fill img, .split-wrap .split-item .split-item-image.split-item-image-fill svg, .split-wrap .split-item .split-item-image.split-item-image-fill video { width: 100%; } @media (max-width: 640px) { .split-wrap .split-item .split-item-content { margin-bottom: 32px; } .split-wrap.invert-mobile .split-item .split-item-content { order: 1; margin-bottom: 0 !important; } .split-wrap.invert-mobile .split-item .split-item-image { margin-bottom: 32px; } } @media (min-width: 641px) { .split-wrap { margin-top: -40px; } .split-wrap:last-of-type { margin-bottom: -40px; } .split-wrap:not(:last-of-type) { margin-bottom: 40px; } .split-wrap .split-item { padding-top: 40px; padding-bottom: 40px; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; } .split-wrap .split-item .split-item-content { flex-shrink: 0; width: 396px; margin-bottom: 0; margin-right: 64px; } .split-wrap .split-item .split-item-image { min-width: 436px; } .split-wrap:not(.invert-desktop) .split-item:nth-child(even), .split-wrap.invert-desktop .split-item:nth-child(odd) { justify-content: flex-end; } .split-wrap:not(.invert-desktop) .split-item:nth-child(even) .split-item-content, .split-wrap.invert-desktop .split-item:nth-child(odd) .split-item-content { order: 1; margin-left: 64px; margin-right: 0; } .split-wrap:not(.invert-desktop) .split-item:nth-child(odd) .split-item-image img, .split-wrap:not(.invert-desktop) .split-item:nth-child(odd) .split-item-image svg, .split-wrap:not(.invert-desktop) .split-item:nth-child(odd) .split-item-image video, .split-wrap.invert-desktop .split-item:nth-child(even) .split-item-image img, .split-wrap.invert-desktop .split-item:nth-child(even) .split-item-image svg, .split-wrap.invert-desktop .split-item:nth-child(even) .split-item-image video { margin-left: auto; } .split-wrap.align-top .split-item { align-items: flex-start; } } @media (min-width: 821px) { .container .split-wrap .split-item .split-item-content { width: 488px; } .container .split-wrap .split-item .split-item-image { min-width: 528px; } } .tiles-wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-right: -12px; margin-left: -12px; margin-top: -12px; } .tiles-wrap:last-of-type { margin-bottom: -12px; } .tiles-wrap:not(:last-of-type) { margin-bottom: 12px; } .tiles-wrap.push-left::after { content: ''; flex-basis: 330px; max-width: 330px; box-sizing: content-box; padding-left: 12px; padding-right: 12px; height: 0; } .tiles-item { flex-basis: 330px; max-width: 330px; box-sizing: content-box; padding: 12px; } .tiles-item * { box-sizing: border-box; } .tiles-item-inner { display: flex; flex-wrap: wrap; flex-direction: column; height: 100%; padding: 32px 24px; } @media (max-width: 640px) { .section:first-of-type { min-height: calc(100vh - (80px / 2)); } } .site-header { position: absolute !important; top: 0; width: 100%; z-index: 10 !important; } .site-header + .site-content .section:first-of-type { padding-top: 80px; } .site-header .brand { margin-right: 32px; } .site-header-inner { display: flex; justify-content: space-between; align-items: center; height: 80px; } .header-nav { flex-grow: 1; } .header-nav .header-nav-inner { display: flex; flex-grow: 1; } .header-nav ul { display: flex; align-items: center; flex-grow: 1; white-space: nowrap; margin-bottom: 0; } .header-nav ul:first-of-type { flex-wrap: wrap; } .header-nav li + .header-button { margin-left: 32px; } .header-nav a:not(.button) { display: block; text-decoration: none; font-weight: 500; text-transform: uppercase; padding: 0 32px; } .invert-color .header-nav a:not(.button) { text-decoration: none; } .header-nav a.button { margin-left: 32px; } .header-nav-center:first-of-type { flex-grow: 1; justify-content: flex-end; } .header-nav-right { justify-content: flex-end; } .header-nav-right + .header-nav-right { flex-grow: 0; } .header-nav-toggle { display: none; } @media (max-width: 640px) { .header-nav-toggle { display: block; } .header-nav-toggle + .header-nav { flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 9999; background: #292b32; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.25s ease-in-out, opacity 0.15s; } .header-nav-toggle + .header-nav.is-active { opacity: 1; } .header-nav-toggle + .header-nav .header-nav-inner { flex-direction: column; padding: 24px; } .header-nav-toggle + .header-nav ul { display: block; text-align: center; } .header-nav-toggle + .header-nav ul a:not(.button) { display: inline-flex; padding-top: 12px; padding-bottom: 12px; } .header-nav-toggle + .header-nav a.button { margin-left: 0; margin-top: 12px; margin-bottom: 12px; } } .is-boxed { background: #1b1c21; } .is-boxed .body-wrap { max-width: 1440px; margin: 0 auto; box-shadow: 0 20px 48px rgba(22, 23, 27, 0.8); } .is-boxed .body-wrap::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #16171b; z-index: -10; } .body-wrap { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100vh; } .site-content { flex: 1 0 auto; } .site-footer { position: relative; } .site-footer::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; /* background: #16171b; */ background: black; z-index: -3; } .site-footer-inner { padding: 48px 0; } .footer-top { padding-bottom: 12px; } .footer-bottom { padding-top: 12px; } .footer-blocks { display: flex; flex-wrap: wrap; margin-right: -24px; margin-left: -24px; margin-top: -12px; } .footer-blocks:last-of-type { margin-bottom: 28px; } .footer-blocks:not(:last-of-type) { margin-bottom: 12px; } .footer-block { flex-grow: 1; flex-basis: 160px; box-sizing: content-box; padding: 12px 24px; } .footer-block * { box-sizing: border-box; } .footer-block ul li:not(:last-child) { margin-bottom: 4px; } .footer-block a { color: #6a6f82; text-decoration: none; } .footer-block a:hover, .footer-block a:active { color: #959cb1; } .invert-color .footer-block a { text-decoration: none; } .footer-block-title { font-size: 14px; line-height: 22px; font-weight: 700; color: #f9faff; text-transform: uppercase; margin-bottom: 8px; } .invert-color .footer-block-title { color: #16171b; } .footer-social a, .footer-nav a { display: flex; } .footer-social ul, .footer-nav ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; white-space: nowrap; margin-bottom: 0; } .footer-social ul { margin-right: -16px; margin-left: -16px; } .footer-social li { padding: 0 8px; } .footer-social a { padding: 8px; } .footer-social a svg { fill: #376df9; transition: fill 0.15s ease; } .footer-social a:hover svg { fill: #6991fa; } .footer-nav { margin-right: -12px; margin-left: -12px; } .footer-nav a { color: #6a6f82; text-decoration: none; padding: 0 12px; } .footer-nav a:hover, .footer-nav a:active { color: #959cb1; } .invert-color .footer-nav a { text-decoration: none; } @media (max-width: 640px) { .footer-top > *:not(:last-child), .footer-bottom > *:not(:last-child) { margin-bottom: 24px; } } @media (min-width: 641px) { .site-footer-inner { padding: 64px 0; } .footer-top.space-between, .footer-bottom.space-between { display: flex; justify-content: space-between; align-items: center; } .footer-top.invert-order-desktop > *:first-child, .footer-bottom.invert-order-desktop > *:first-child { order: 1; } } .section-inner { position: relative; padding-top: 48px; padding-bottom: 48px; } .section-header { padding-bottom: 48px; } @media (min-width: 641px) { .section-inner { padding-top: 80px; padding-bottom: 80px; } .section-header { padding-bottom: 80px; } } .hero-inner > .hero-content + .hero-figure, .hero-inner > .hero-figure + .hero-content { margin-top: 48px; } .hero-inner > .hero-figure > a { display: inline-flex; align-items: center; vertical-align: top; } @media (max-width: 640px) { .hero .split-wrap .split-item .split-item-content { margin-bottom: 48px; } .hero .split-wrap.invert-mobile .split-item .split-item-image { margin-bottom: 48px; } } @media (min-width: 641px) { .hero-inner > .hero-content + .hero-figure, .hero-inner > .hero-figure + .hero-content { margin-top: 64px; } } @media (min-width: 641px) { .features-split .section-header { padding-bottom: 92px; } } .features-tiles .tiles-wrap { margin-right: -16px; margin-left: -16px; margin-top: -16px; } .features-tiles .tiles-wrap:last-of-type { margin-bottom: -16px; } .features-tiles .tiles-wrap:not(:last-of-type) { margin-bottom: 16px; } .features-tiles .tiles-wrap.push-left::after { flex-basis: 360px; max-width: 360px; padding-left: 16px; padding-right: 16px; } .features-tiles .tiles-item { flex-basis: 360px; max-width: 360px; padding: 16px; } .features-tiles .tiles-item-inner { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } @media (min-width: 641px) { .features-tiles .tiles-wrap { margin-right: -32px; margin-left: -32px; margin-top: -32px; } .features-tiles .tiles-wrap:last-of-type { margin-bottom: -32px; } .features-tiles .tiles-wrap:not(:last-of-type) { margin-bottom: 32px; } .features-tiles .tiles-wrap.push-left::after { padding-left: 32px; padding-right: 32px; } .features-tiles .tiles-item { padding: 32px; } } .pricing .tiles-wrap.push-left::after { flex-basis: 344px; max-width: 344px; } .pricing .tiles-item { flex-basis: 344px; max-width: 344px; } .pricing .tiles-item-inner { padding-top: 24px; padding-bottom: 24px; padding-left: 24px; padding-right: 24px; } .pricing-item-content { flex-grow: 1; width: 100%; } ul.pricing-item-features-list li { display: flex; align-items: center; margin-bottom: 12px; } .pricing-switcher { margin-bottom: 48px; } @media (min-width: 641px) { .pricing-switcher { margin-bottom: 64px; } } .testimonial .tiles-wrap.push-left::after { flex-basis: 344px; max-width: 344px; } .testimonial .tiles-item { flex-basis: 344px; max-width: 344px; } .testimonial .tiles-item-inner { padding-top: 20px; padding-bottom: 20px; padding-left: 24px; padding-right: 24px; } .testimonial-item-content { flex-grow: 1; } .testimonial-item-source { display: inline-flex; flex-wrap: wrap; align-items: center; } .team .tiles-wrap { margin-right: -16px; margin-left: -16px; margin-top: -16px; } .team .tiles-wrap:last-of-type { margin-bottom: -16px; } .team .tiles-wrap:not(:last-of-type) { margin-bottom: 16px; } .team .tiles-wrap.push-left::after { flex-basis: 296px; max-width: 296px; padding-left: 16px; padding-right: 16px; } .team .tiles-item { flex-basis: 296px; max-width: 296px; padding: 16px; } .team .tiles-item-inner { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } @media (min-width: 641px) { .team .section-header { padding-bottom: 80px; } .team .tiles-wrap { margin-right: -32px; margin-left: -32px; margin-top: -32px; } .team .tiles-wrap:last-of-type { margin-bottom: -32px; } .team .tiles-wrap:not(:last-of-type) { margin-bottom: 32px; } .team .tiles-wrap.push-left::after { padding-left: 32px; padding-right: 32px; } .team .tiles-item { padding: 32px; } } .cta .section-inner { padding-top: 48px; padding-bottom: 48px; } .cta-slogan { margin-bottom: 40px; } @media (min-width: 641px) { .cta .section-inner { padding-top: 64px; padding-bottom: 64px; } .cta-split { display: flex; justify-content: space-between; align-items: center; } .cta-split .cta-slogan { margin-bottom: 0; margin-right: 48px; } } .clients .section-inner { padding-top: 26px; padding-bottom: 26px; } .clients-inner ul { display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; margin: 0; } .clients-inner li { padding: 12px 28px; } @media (min-width: 641px) { .clients .clients-inner ul { flex-direction: row; } } .signin .section-header { padding-bottom: 32px; } .signin .tiles-item-inner { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; } @media (min-width: 641px) { .signin .section-header { padding-bottom: 48px; } } .signin-footer { display: flex; flex-wrap: wrap; justify-content: space-between; } [class*='illustration-'] { position: relative; } [class*='illustration-']::after { pointer-events: none; } [class*='illustration-element-']::after { z-index: -1; } [class*='illustration-section-']::after { z-index: -2; } .illustration-section-01::after { content: ''; position: absolute; width: 100%; max-width: 100%; height: 1024px; /* background-image: url(../images/illustration-section-01.svg); */ background-image: url(../images/bg.svg); background-repeat: no-repeat; background-size: cover; /*auto*/ left: 50%; top: 0; background-position: center top; transform: translate(-50%); } .illustration-section-02::after { content: ''; position: absolute; width: 100%; max-width: 100%; height: 612px; background-image: url(../images/illustration-section-02.svg); background-repeat: no-repeat; background-size: auto; left: 50%; top: 0; background-position: center top; transform: translate(-50%); } .site-footer { color: #6a6f82; } .features-tiles-item-image { display: inline-flex; border-radius: 50%; background: radial-gradient(circle at bottom, #376df9 0%, #ff79af 50%, #ff8d74 100%); } .pricing .tiles-item-inner { background: #292b32; } .pricing-item-header { position: relative; } .pricing-item-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } .pricing-item-header::after { background: rgba(106, 111, 130, 0.32); max-width: 88px; } .pricing-item-price-currency { color: #959cb1; } ul.pricing-item-features-list { position: relative; } ul.pricing-item-features-list::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } ul.pricing-item-features-list::after { background: rgba(106, 111, 130, 0.32); } ul.pricing-item-features-list li { margin-bottom: 0; padding: 14px 0; position: relative; } ul.pricing-item-features-list li::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } ul.pricing-item-features-list li::before { background: rgba(106, 111, 130, 0.32); } ul.pricing-item-features-list li::after { content: ''; display: block; width: 24px; height: 24px; margin-right: 12px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2011h14v2H5z%22%20fill%3D%22%236A6F82%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; order: -1; } ul.pricing-item-features-list li.is-checked::after { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill-rule%3D%22nonzero%22%20fill%3D%22none%22%3E%3Ccircle%20fill%3D%22%231EC198%22%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2212%22%2F%3E%3Cpath%20fill%3D%22%23292B32%22%20d%3D%22M10.5%2012.267l-2.5-1.6-1%201.066L10.5%2016%2017%209.067%2016%208z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); } .testimonial .tiles-item-inner { background: #292b32; } .testimonial-item-content { position: relative; } .testimonial-item-content::before { content: ''; display: block; width: 24px; height: 18px; margin-top: 12px; margin-bottom: 16px; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2224%22%20height%3D%2218%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0%2013.481c0-2.34.611-4.761%201.833-7.263C3.056%203.716%204.733%201.643%206.865%200L11%202.689C9.726%204.382%208.777%206.093%208.152%207.824c-.624%201.73-.936%203.578-.936%205.545V18H0v-4.519zm13%200c0-2.34.611-4.761%201.833-7.263%201.223-2.502%202.9-4.575%205.032-6.218L24%202.689c-1.274%201.693-2.223%203.404-2.848%205.135-.624%201.73-.936%203.578-.936%205.545V18H13v-4.519z%22%20fill%3D%22%23FF5FA0%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; } .testimonial-item-footer { font-family: 'Fira Sans', sans-serif; font-weight: 600; padding-top: 20px; } .testimonial-item-footer.has-top-divider::before { background: rgba(106, 111, 130, 0.32); } .testimonial-item-link { color: #376df9; } .testimonial-item-link a { color: #376df9; text-decoration: none; } .testimonial-item-link a:hover { color: #6991fa; } .cta .form-input { border-color: transparent; border-radius: 2px; } .cta-inner { padding-left: 16px; padding-right: 16px; background-color: #376df9; background: linear-gradient(100deg, #376df9 0, #ff5fa0 75%, #ffc55a 100%); } @media (min-width: 641px) { .cta .form-input { min-width: 280px; } .cta-inner { padding-left: 48px; padding-right: 48px; } } .screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .list-reset { list-style: none; padding: 0; } .list-reset li { margin: 0; } .ta-l { text-align: left; } .ta-c { text-align: center; } .ta-r { text-align: right; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .text-color-high { color: #f9faff; } .text-color-mid { color: #959cb1; } .text-color-low { color: #6a6f82; } .text-color-primary { color: #376df9; } .text-color-secondary { color: #ff5fa0; } .text-color-error { color: #ff5fa0; } .text-color-warning { color: #ffc55a; } .text-color-success { color: #1ec198; } .invert-color .text-color-high { color: #16171b; } .invert-color .text-color-mid { color: #1c1d22; } .invert-color .text-color-low { color: #6a6f82; } .tt-u { text-transform: uppercase; } .image-full { width: 100%; } .image-larger { position: relative; left: 50%; transform: translateX(-50%); width: calc(100% + 96px); max-width: 100vw; } .has-bg-color { position: relative; background-color: #fff; z-index: 0; } .has-shadow { box-shadow: 0 24px 64px rgba(22, 23, 27, 0.64); } img.has-shadow { border-radius: 2px; } .has-top-divider { position: relative; } .has-top-divider::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } .has-bottom-divider { position: relative; } .has-bottom-divider::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #292b32; } .invert-color .has-top-divider { position: relative; } .invert-color .has-top-divider::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #e5e9ff; } .invert-color .has-bottom-divider { position: relative; } .invert-color .has-bottom-divider::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #e5e9ff; } .center-content { text-align: center; } .center-content img, .center-content svg, .center-content video { margin-left: auto; margin-right: auto; } .center-content .button-group { justify-content: center; } .responsive-video { position: relative; padding-bottom: 56.25%; height: 0; } .responsive-video.is-4-3 { padding-bottom: 75%; } .responsive-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-0 { margin: 0; } .mt-0 { margin-top: 0; } .mr-0 { margin-right: 0; } .mb-0 { margin-bottom: 0; } .ml-0 { margin-left: 0; } .m-4 { margin: 4px; } .mt-4 { margin-top: 4px; } .mr-4 { margin-right: 4px; } .mb-4 { margin-bottom: 4px; } .ml-4 { margin-left: 4px; } .m-8 { margin: 8px; } .mt-8 { margin-top: 8px; } .mr-8 { margin-right: 8px; } .mb-8 { margin-bottom: 8px; } .ml-8 { margin-left: 8px; } .m-12 { margin: 12px; } .mt-12 { margin-top: 12px; } .mr-12 { margin-right: 12px; } .mb-12 { margin-bottom: 12px; } .ml-12 { margin-left: 12px; } .m-16 { margin: 16px; } .mt-16 { margin-top: 16px; } .mr-16 { margin-right: 16px; } .mb-16 { margin-bottom: 16px; } .ml-16 { margin-left: 16px; } .m-24 { margin: 24px; } .mt-24 { margin-top: 24px; } .mr-24 { margin-right: 24px; } .mb-24 { margin-bottom: 24px; } .ml-24 { margin-left: 24px; } .m-32 { margin: 32px; } .mt-32 { margin-top: 32px; } .mr-32 { margin-right: 32px; } .mb-32 { margin-bottom: 32px; } .ml-32 { margin-left: 32px; } .p-0 { padding: 0; } .pt-0 { padding-top: 0; } .pr-0 { padding-right: 0; } .pb-0 { padding-bottom: 0; } .pl-0 { padding-left: 0; } .p-4 { padding: 4px; } .pt-4 { padding-top: 4px; } .pr-4 { padding-right: 4px; } .pb-4 { padding-bottom: 4px; } .pl-4 { padding-left: 4px; } .p-8 { padding: 8px; } .pt-8 { padding-top: 8px; } .pr-8 { padding-right: 8px; } .pb-8 { padding-bottom: 8px; } .pl-8 { padding-left: 8px; } .p-12 { padding: 12px; } .pt-12 { padding-top: 12px; } .pr-12 { padding-right: 12px; } .pb-12 { padding-bottom: 12px; } .pl-12 { padding-left: 12px; } .p-16 { padding: 16px; } .pt-16 { padding-top: 16px; } .pr-16 { padding-right: 16px; } .pb-16 { padding-bottom: 16px; } .pl-16 { padding-left: 16px; } .p-24 { padding: 24px; } .pt-24 { padding-top: 24px; } .pr-24 { padding-right: 24px; } .pb-24 { padding-bottom: 24px; } .pl-24 { padding-left: 24px; } .p-32 { padding: 32px; } .pt-32 { padding-top: 32px; } .pr-32 { padding-right: 32px; } .pb-32 { padding-bottom: 32px; } .pl-32 { padding-left: 32px; } .spacer-4 { padding-top: 4px; } .spacer-8 { padding-top: 8px; } .spacer-12 { padding-top: 12px; } .spacer-16 { padding-top: 16px; } .spacer-24 { padding-top: 24px; } .spacer-32 { padding-top: 32px; } .spacer-48 { padding-top: 48px; } .spacer-64 { padding-top: 64px; } .br-6 { border-radius: 6px; } .br-12 { border-radius: 12px; } .br-18 { border-radius: 18px; } .br-24 { border-radius: 24px; } .w-150 { width: 150px; } .w-300 { width: 300px; } @media (max-width: 640px) { .ta-l-mobile { text-align: left; } .ta-c-mobile { text-align: center; } .ta-r-mobile { text-align: right; } .center-content-mobile { text-align: center; } .center-content-mobile img, .center-content-mobile svg, .center-content-mobile video { margin-left: auto; margin-right: auto; } .center-content-mobile .button-group { justify-content: center; } .spacer-4-mobile { padding-top: 4px; } .spacer-8-mobile { padding-top: 8px; } .spacer-12-mobile { padding-top: 12px; } .spacer-16-mobile { padding-top: 16px; } .spacer-24-mobile { padding-top: 24px; } .spacer-32-mobile { padding-top: 32px; } .spacer-48-mobile { padding-top: 48px; } .spacer-64-mobile { padding-top: 64px; } .w-150 { width: 240px; } } @media (min-width: 641px) { .ta-l-desktop { text-align: left; } .ta-c-desktop { text-align: center; } .ta-r-desktop { text-align: right; } .center-content-desktop { text-align: center; } .center-content-desktop img, .center-content-desktop svg, .center-content-desktop video { margin-left: auto; margin-right: auto; } .center-content-desktop .button-group { justify-content: center; } } /*Pulse Button*/ .pulse { box-shadow: 0 0 0 rgba(120, 120, 120, 0.4); animation: pulse 4s infinite; } .pulse:hover { animation: none; } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4); } 70% { -webkit-box-shadow: 0 0 0 15px rgba(120, 120, 120, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4); box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4); } 70% { -moz-box-shadow: 0 0 0 10px rgba(120, 120, 120, 0); box-shadow: 0 0 0 15px rgba(120, 120, 120, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0); box-shadow: 0 0 0 0 rgba(120, 120, 120, 0); } } /*Pulse Button*/