a, abbr, acronym, address, applet, article, aside, audio, big, blockquote, body, canvas, caption, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, ul, var, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none } img { max-width: 100% } html { -webkit-box-sizing: border-box; box-sizing: border-box; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } *, :after, :before { -webkit-box-sizing: inherit; box-sizing: inherit } a { background-color: transparent; color: #30cf43; font-weight: 500; text-decoration: none; -webkit-transition: all .5s ease; transition: all .5s ease } a:active, a:hover { outline: 0 } b, strong { font-weight: 700 } dfn, em, i { font-style: italic } h1 { margin: .67em 0; font-size: 2em } small { font-size: 80% } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline } sup { top: -.5em } sub { bottom: -.25em } img { border: 0 } svg:not(:root) { overflow: hidden } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em } button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit } button { overflow: visible; border: none; background: transparent } button, select { text-transform: none } button, html input[type=button], input[type=reset], input[type=submit] { cursor: pointer; -webkit-appearance: button } button[disabled], html input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0 } input { line-height: normal } input:focus { outline: none } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0 } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { height: auto } input[type=search] { -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none } input[type=file]::file-selector-button { padding: 8px 12px; border: none; color: #15171A; font-family: 'Inter', sans-serif; font-size: 1.45rem; font-weight: 500; cursor: pointer; background: #ebeef0; border-radius: 3px; } legend { padding: 0; border: 0 } textarea { overflow: auto } table { border-spacing: 0; border-collapse: collapse } td, th { padding: 0 } html { overflow-y: scroll; font-size: 62.5%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0) } body, html { overflow-x: hidden } body { color: #434952; font-family: 'Inter', sans-serif; font-size: 1.45rem; line-height: 1.6em; font-weight: 400; font-style: normal; letter-spacing: 0; text-rendering: optimizeLegibility; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -moz-font-feature-settings: "liga"on } ::-moz-selection { text-shadow: none; background: #cbeafb } ::selection { text-shadow: none; background: #cbeafb } hr { display: block; margin: 2em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #e5eff5 } mark { background-color: #fdffb6 } audio, canvas, iframe, img, svg, video { vertical-align: middle } fieldset { margin: 0; padding: 0; border: 0 } blockquote, dl, ol, p, ul { margin: 0 0 1.5em } ol, ul { padding-left: 2.5em } ol ol, ol ul, ul ol, ul ul { margin: .5em 0 1em; padding-left: 2em } ul { list-style: disc } ol { list-style: decimal } li { margin: .5em 0; line-height: 1.6em } dt { float: left; margin: 0 20px 0 0; width: 120px; color: #343f44; font-weight: 500; text-align: right } dd { margin: 0 0 5px; text-align: left } blockquote { margin: 1.6em 0; padding: 0 1.6em; border-left: .5em solid #e5eff5 } blockquote p { margin: .8em 0; font-size: 1.2em; line-height: 1.55em; font-weight: 300 } blockquote small { display: inline-block; margin: .8em 0 .8em 1.5em; font-size: .9em; opacity: .8 } blockquote small:before { content: "\2014 \00A0" } blockquote cite { font-weight: 700 } blockquote cite a { font-weight: 400 } a:hover { color: #2bba3c; text-decoration: none; -webkit-transition: all .2s ease; transition: all .2s ease } .hidden { display: none !important } .visuallyhidden { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; padding: 0; width: 1px; height: 1px; border: 0 } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { position: static; overflow: visible; clip: auto; margin: 0; width: auto; height: auto } .invisible { visibility: hidden } .sr-only { position: absolute; overflow: hidden; clip: rect(0, 0, 0, 0); margin: -1px; padding: 0; width: 1px; height: 1px; border: 0 } .sr-only-focusable:focus { z-index: 900; overflow: visible; clip: auto; margin: 0; padding: 0 10px; width: auto; height: auto; color: #333; line-height: 49px; font-weight: 700; text-decoration: none; background-color: #f5f5f5 } .right { float: right } .left { float: left } .clearfix:after, .clearfix:before { content: " "; display: table } .clearfix:after { clear: both } .gh-table { box-sizing: border-box; margin: 1.6em 0; max-width: 100%; width: 100%; background-color: transparent; -webkit-box-sizing: border-box; -moz-box-sizing: border-box } .gh-table td, .gh-table th { padding: 8px; border-top: 1px solid #e2edf2; line-height: 20px; text-align: left; vertical-align: top } .gh-table th { color: #7d878a } .gh-table caption+thead tr:first-child td, .gh-table caption+thead tr:first-child th, .gh-table colgroup+thead tr:first-child td, .gh-table colgroup+thead tr:first-child th, .gh-table thead:first-child tr:first-child td, .gh-table thead:first-child tr:first-child th { border-top: 0 } .gh-table tbody+tbody { border-top: 2px solid #e2edf2 } .gh-table .gh-table .gh-table { background-color: #fff } .gh-table tbody>tr:nth-child(odd)>td, .gh-table tbody>tr:nth-child(odd)>th { background-color: #f4f8fa } .gh-table.plain tbody>tr:nth-child(odd)>td, .gh-table.plain tbody>tr:nth-child(odd)>th { background: transparent } h1, h2, h3, h4, h5, h6 { margin-top: 0; color: #15171A; line-height: 1.15; font-weight: 800; text-rendering: optimizeLegibility } h1 { margin: 0 0 .5em; font-size: 2.6rem; font-weight: 600 } @media (max-width:500px) { h1 { font-size: 2.2rem } } h2 { margin: 1.5em 0 .5em; font-size: 2rem; font-weight: 500 } @media (max-width:500px) { h2 { font-size: 1.8rem } } h3 { margin: 1.5em 0 .5em; font-size: 1.8rem; font-weight: 500 } @media (max-width:500px) { h3 { font-size: 1.7rem } } h4 { margin: 1.5em 0 .5em; font-size: 1.6rem; font-weight: 500 } h5, h6 { margin: 1.5em 0 .5em; font-size: 1.4rem; font-weight: 500 } .supermassive-h1 { margin-top: 40px; color: #fa3a57; font-size: 12vw; font-weight: 100 } p code { padding: 2px 5px; line-height: 1; font-weight: 400 !important; background: #EBEEF0; border-radius: 3px; box-shadow: rgba(0,0,0,0.03) 0 0 0 1px inset; } .gh-anchor { color: inherit } .gh-anchor, .gh-anchor:hover { text-decoration: none } .gh-header { position: relative; z-index: 999; max-width: 700px; margin-right: 4rem; } .gh-header h1 { margin: 0; font-size: 4.8rem; font-weight: 700; letter-spacing: -.035em; } .gh-header a { font-size: 1.5rem; font-weight: 500; } .gh-header a:hover { color: #2bba3c; text-decoration: none; } .gh-mainhead { margin: 0; color: inherit; font-size: 4.4rem; font-weight: 300; letter-spacing: -2px } .gh-subhead { margin: 0; font-size: 4.4rem; font-weight: 600; line-height: 1.25em; color: rgba(0,0,10,.45); } .gh-subhead strong { color: #111; } @media (max-width: 940px) { .gh-subhead { max-width: 600px; font-size: 3.2rem; text-align: center; } .gh-header { margin-right: 0; } } @media (max-width:660px) { .gh-header { padding: 10vw } .gh-header h1, .gh-mainhead { font-size: 6vw } } p+p>.gh-morelink { position: relative; top: -10px } .gh-morelink svg { margin-left: 3px; height: .5em } .gh-badge { display: inline-block; padding: 2px 3px 3px; border: 1px solid #95bc37; color: #fff; font-size: .8em; line-height: 1em; font-weight: 600; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .1); white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: -webkit-gradient(linear, left top, left bottom, from(#a4d037), to(#95bc37)); background: linear-gradient(#a4d037, #95bc37); border-radius: 2px; -webkit-box-shadow: rgba(0, 0, 0, .15) 0 1px 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15) } .gh-badge-blue { border: 1px solid #3ea3db; background: -webkit-gradient(linear, left top, left bottom, from(#58b9ef), to(#3ea9e5)); background: linear-gradient(#58b9ef, #3ea9e5) } .gh-badge-black { border: 1px solid #343130; background: -webkit-gradient(linear, left top, left bottom, from(#4e4744), to(#34383a)); background: linear-gradient(#4e4744, #34383a) } .gh-badge-outline { border-color: #d8dfe1; color: #bbc6cb; font-weight: 400; background: transparent; -webkit-box-shadow: none; box-shadow: none } .gh-customerlogos { display: block; opacity: .7 } .gh-customerlogos img { width: 100% } .gh-signupbox-section { border-top: 1px solid #ecf4f8; border-bottom: 1px solid #ecf4f8; background: -webkit-gradient(linear, left top, left bottom, from(#f7fafc), to(#f4f8fb)); background: linear-gradient(#f7fafc, #f4f8fb) } .gh-signupbox { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 -20px; padding: 20px; font-size: 1.6rem; line-height: 1.3em; background: #fff; border-radius: 6px; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .03); box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .03) } .gh-signup-actions, .gh-signupbox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .gh-signup-actions { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 0; flex-shrink: 0; margin-left: 20px; max-width: 300px } .gh-signup-actions .gh-btn { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-negative: 0; flex-shrink: 0 } .gh-signup-actions .gh-btn-blue { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; margin-right: 10px } .gh-signup-actions .gh-btn-blue span { width: 100%; text-align: center } @media (max-width:1040px) { .gh-signupbox { margin: 0 } .gh-signupbox-text-extension { display: none } } @media (max-width:620px) { .gh-signupbox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; text-align: center } .gh-signup-actions { margin: 15px 0 0; max-width: none; width: 100% } } .gh-ghostpro { display: inline-block; white-space: nowrap } .gh-ghostpro svg { height: 31px } .gh-ghostpro .gh-badge { margin-left: 4px; padding-top: 4px; font-size: 1.2rem; text-transform: uppercase } .gh-btn { display: inline-block; outline: none; border: 1px solid #cbdfeb; color: #738a94; text-decoration: none !important; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; fill: #738a94; border-radius: 3px; -webkit-transition: none; transition: none; -webkit-font-smoothing: subpixel-antialiased } .gh-btn span { display: block; padding: 0 14px; height: 36px; font-size: 1.5rem; line-height: 36px; font-weight: 500; text-align: center; border-radius: 4px } .gh-btn.disabled, .gh-btn[disabled], fieldset[disabled] .gh-btn { -webkit-box-shadow: none; box-shadow: none; opacity: .5; cursor: not-allowed; pointer-events: none } .gh-btn-green { padding: 1px; border: 0; color: #fff; background: #30cf43; -webkit-transition: none !important; transition: none !important } .gh-btn-green:active, .gh-btn-green:focus { background: #30cf43 } .gh-btn-green:active span, .gh-btn-green:focus span { background: #30cf43; -webkit-box-shadow: none; box-shadow: none } .gh-btn-subscribe { padding: 1px; border: 0; color: #B5FF18; font-weight: 600; background: none; -webkit-transition: none !important; transition: none !important } .gh-btn-link { border-color: transparent } .gh-btn-link span { padding-left: 0; padding-right: 0 } .gh-spinner { position: relative; display: inline-block; margin-right: 8px; width: 18px; height: 18px; border: 4px solid rgba(0, 0, 0, .2); border-radius: 100%; vertical-align: text-bottom; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite } .gh-spinner:before { content: ""; display: block; margin-top: 9px; width: 4px; height: 4px; background: rgba(0, 0, 0, .6); border-radius: 100% } .gh-btn-green .gh-spinner { border-color: hsla(0, 0%, 100%, .2) } .gh-btn-green .gh-spinner:before { background: hsla(0, 0%, 100%, .6) } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } svg.retry-animated { stroke: #fff; -webkit-animation: rotate-360 .5s ease-in-out forwards; animation: rotate-360 .5s ease-in-out forwards } @-webkit-keyframes rotate-360 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } @keyframes rotate-360 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(1turn); transform: rotate(1turn) } } .gh-btn-lg { -webkit-transform: scale(1.25); transform: scale(1.25) } .gh-btn-group { margin-top: 3rem } .gh-btn-group .gh-btn:first-of-type { margin-right: 15px } .gh-btn-group .gh-btn span { font-size: 1.4rem } .gh-form-group { position: relative; margin-bottom: 1.6em; max-width: 500px; width: 100%; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text } .gh-form-group p { margin: 4px 0 0; color: #b1b1b1; font-size: 1.3rem } .gh-form-group h3 { margin-bottom: 1.6em; font-size: 1.5rem } .gh-form-group label { margin-bottom: 4px } .gh-form-group-horizontal { display: -webkit-box; display: -ms-flexbox; display: flex } .gh-form-group-horizontal .gh-form-group+.gh-form-group { margin-left: 15px } @media (max-width:550px) { .gh-form-group { max-width: 100% } } .gh-input, .gh-select, select { display: block; padding: 12px; width: 100%; border: 1px solid #dbe3e7; color: #15171A; font-size: 1.4rem; line-height: 1em; font-weight: 500; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; border-radius: 5px; -webkit-transition: border-color .15s linear; transition: border-color .15s linear; -webkit-appearance: none } .gh-select, select { cursor: pointer } ::-webkit-input-placeholder { color: #a7b5bc; font-weight: 200 } :-ms-input-placeholder { color: #a7b5bc; font-weight: 200 } textarea { min-width: 250px; min-height: 10rem; max-width: 500px; width: 100%; height: auto; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; resize: vertical } textarea.gh-input { line-height: 1.5em } .gh-input.focus, .gh-input.stripe-focus, .gh-input:focus, .gh-select:focus, select:focus, textarea:focus { outline: 0; border-color: #bfcdd5 } .gh-input:-webkit-autofill { -webkit-transition: background-color 100000000s; transition: background-color 100000000s; -webkit-text-fill-color: #677d87; -webkit-animation: void-animation-out 1ms } .gh-input.stripe-autofill { background-color: #fff !important } .gh-input-icon { position: relative } .gh-input-icon input { padding-left: 35px } .gh-input-icon select { padding-right: 35px } .gh-input-icon svg { position: absolute; top: 50%; left: 12px; z-index: 100; height: 14px; fill: #a6bac5; -webkit-transform: translateY(-7px); transform: translateY(-7px) } .gh-select.gh-input-icon svg { right: 12px; left: auto } .gh-input-icon-lock svg { -webkit-transform: translateY(-8px); transform: translateY(-8px) } .gh-input-tooltip { position: relative } .gh-input-tooltip input { padding-right: 35px } .gh-input-tooltip button { position: absolute; top: 0; right: 5px; z-index: 100; overflow: hidden; height: 41px } .gh-input-tooltip button svg { height: 14px; fill: #a6bac5 } .for-checkbox label, .for-radio label { display: block; padding-bottom: 4px; cursor: pointer } .for-checkbox label p, .for-radio label p { overflow: auto; color: #000; font-weight: 400 } .for-checkbox label:hover p, .for-radio label:hover p { color: #738a94 } .for-checkbox input, .for-radio input { position: absolute; top: 0; right: 0; bottom: 0; left: -9999px } .for-checkbox .input-toggle-component, .for-radio .input-toggle-component { position: relative; top: 1px; display: inline-block; float: left; margin-right: 7px; width: 18px; height: 18px; border: 1px solid #dfe1e3; background: #f7f7f7 } .for-checkbox label:hover input:not(:checked)+.input-toggle-component, .for-radio label:hover input:not(:checked)+.input-toggle-component { border-color: #c5d2d9 } .for-checkbox .input-toggle-component { border-radius: 5px; -webkit-transition: background .15s ease-in-out, border-color .15s ease-in-out; transition: background .15s ease-in-out, border-color .15s ease-in-out } .for-checkbox .input-toggle-component:before { content: ""; position: absolute; top: 4px; left: 3px; width: 10px; height: 6px; border: 2px solid #fff; border-top: none; border-right: none; opacity: 0; -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .for-checkbox input:checked+.input-toggle-component { border-color: #86ac28; background: #a4d037 } .for-checkbox input:checked+.input-toggle-component:before { opacity: 1 } .for-radio .input-toggle-component { border-radius: 100px; -webkit-transition: background .15s ease-in-out, border-color .15s ease-in-out; transition: background .15s ease-in-out, border-color .15s ease-in-out } .for-radio .input-toggle-component:before { content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background: #fff; border-radius: 100%; opacity: 0; -webkit-transition: opacity .15s ease-in-out; transition: opacity .15s ease-in-out } .for-radio input:checked+.input-toggle-component { border-color: #86ac28; background: #a4d037 } .for-radio input:checked+.input-toggle-component:before { opacity: 1 } .gh-select { position: relative; display: block; overflow: hidden; padding: 0; max-width: 100%; width: 100%; } .gh-select select { padding: 8px 10px; outline: none; line-height: normal; text-indent: .01px; text-overflow: ""; background: #fff; appearance: none; -webkit-appearance: none; -moz-appearance: window } .gh-select select::-ms-expand { display: none } .gh-select select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000 } .gh-error .gh-input, .gh-error select, .stripe-error { border-color: #f05230 } .gh-error .gh-input-icon svg, .gh-error .gh-input-tooltip button svg { fill: #f05230 } .gh-error-message { display: block; margin: 10px 0 0; color: #f05230; font-size: 1.2rem; line-height: 1.4em } .gh-form-group .gh-response { position: absolute; top: -4px; right: 0; margin: 0; color: #a6b0b3; font-size: 1.1rem; font-weight: 400; text-align: right } .gh-form-group.gh-error .gh-response, .gh-main-error.gh-error { color: #f05230 } .gh-flow-loading { margin-top: 5px; font-size: 1.4rem } .gh-success .gh-input, .gh-success select { border-color: #a4d037 } .gh-success .gh-input-icon svg { fill: #8cb42a } .gh-success .gh-input-tooltip button { display: none } .hamburger { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: visible; margin: 0; padding: 2px 0; border: 0; color: inherit; font: inherit; text-transform: none; background-color: transparent; cursor: pointer; -webkit-transition: opacity .15s linear, -webkit-filter .15s linear; transition: opacity .15s linear, -webkit-filter .15s linear; transition: opacity .15s linear, filter .15s linear; transition: opacity .15s linear, filter .15s linear, -webkit-filter .15s linear } .hamburger-box { position: relative; display: inline-block; width: 20px; height: 13px } .hamburger-inner { top: 50%; display: block; margin-top: -2px } .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before { position: absolute; width: 20px; height: 1px; background-color: #738a94; border-radius: 4px; -webkit-transition: -webkit-transform .15s ease; transition: -webkit-transform .15s ease; transition: transform .15s ease; transition: transform .15s ease, -webkit-transform .15s ease } .hamburger-inner:after, .hamburger-inner:before { content: ""; display: block } .hamburger-inner:before { top: -6px } .hamburger-inner:after { bottom: -6px } .hamburger--collapse .hamburger-inner { top: auto; bottom: 0; -webkit-transition-delay: .15s; transition-delay: .15s; -webkit-transition-timing-function: cubic-bezier(.55, .055, .675, .19); transition-timing-function: cubic-bezier(.55, .055, .675, .19); -webkit-transition-duration: .15s; transition-duration: .15s } .hamburger--collapse .hamburger-inner:after { top: -12px; -webkit-transition: top .3s cubic-bezier(.33333, .66667, .66667, 1) .3s, opacity .1s linear; transition: top .3s cubic-bezier(.33333, .66667, .66667, 1) .3s, opacity .1s linear } .hamburger--collapse .hamburger-inner:before { -webkit-transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, -webkit-transform .15s cubic-bezier(.55, .055, .675, .19); transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, -webkit-transform .15s cubic-bezier(.55, .055, .675, .19); transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, transform .15s cubic-bezier(.55, .055, .675, .19); transition: top .12s cubic-bezier(.33333, .66667, .66667, 1) .3s, transform .15s cubic-bezier(.55, .055, .675, .19), -webkit-transform .15s cubic-bezier(.55, .055, .675, .19) } .gh-mobilehead-open .hamburger-inner, .gh-mobilehead-open .hamburger-inner:after, .gh-mobilehead-open .hamburger-inner:before { background-color: #343f44 } .gh-mobilehead-open .hamburger-inner { -webkit-transition-delay: .32s; transition-delay: .32s; -webkit-transition-timing-function: cubic-bezier(.215, .61, .355, 1); transition-timing-function: cubic-bezier(.215, .61, .355, 1); -webkit-transform: translate3d(0, -6px, 0) rotate(-45deg); transform: translate3d(0, -6px, 0) rotate(-45deg) } .gh-mobilehead-open .hamburger-inner:after { top: 0; opacity: 0; -webkit-transition: top .3s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s linear .27s; transition: top .3s cubic-bezier(.33333, 0, .66667, .33333), opacity .1s linear .27s } .gh-mobilehead-open .hamburger-inner:before { top: 0; -webkit-transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s; transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s; transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, transform .15s cubic-bezier(.215, .61, .355, 1) .42s; transition: top .12s cubic-bezier(.33333, 0, .66667, .33333) .18s, transform .15s cubic-bezier(.215, .61, .355, 1) .42s, -webkit-transform .15s cubic-bezier(.215, .61, .355, 1) .42s; -webkit-transform: rotate(-90deg); transform: rotate(-90deg) } .gh-viewport { position: relative; min-height: 100% } .inner { margin: 0 auto; max-width: 1280px; width: 100% } .inner.flex { display: flex; justify-content: space-between; align-items: center; margin: 0 auto 10vw; } @media (max-width: 940px) { .inner.flex { flex-direction: column; } } .gh-head { position: relative; z-index: 900; margin-bottom: 40px; padding: 0 4vw; width: 100%; background: none; } @media (max-width:600px) { .gh-head { padding-right: 15px; padding-left: 15px } } .gh-navbar { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 80px; font-size: 1.4rem; } .gh-navbar, .gh-navbar-left, .gh-navbar-right { display: -webkit-box; display: -ms-flexbox; display: flex } .gh-nav-logo, .gh-navbar, .gh-navbar-left, .gh-navbar-right { -webkit-box-align: center; -ms-flex-align: center; align-items: center } .gh-nav-logo { max-width: 176px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; padding: 0 !important; opacity: 1 !important; } .gh-nav-item.gh-nav-logo:hover { color: inherit } .gh-nav-logo .ghost-svg { width: auto; height: 25px } .gh-nav-logo-suffix { position: relative; margin: 0 0 0 12px; padding: 0 0 0 11px; font-size: 1.6rem; font-weight: 500; text-shadow: none; -webkit-transition: none; transition: none } .gh-nav-logo-suffix:before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 1px; height: 23px; background: #CED4D9; -webkit-transform: rotate(25deg); transform: rotate(25deg) } .gh-nav-logo .gscan-badge { height: 36px; margin: 0 0 2px 5px; } .gh-navbar-item { -ms-flex-negative: 0; flex-shrink: 0; display: block; padding: 10px 15px; color: #15171a; font-size: 1.5rem; font-weight: 500; text-decoration: none; opacity: .7; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gh-navbar-item-active, .gh-navbar-item:hover { color: #15171a; text-decoration: none; opacity: 1; } .gh-navbar-item:hover .gh-nav-logo-suffix { color: inherit } .gh-navbar-btn { margin-left: 1.6rem; color: #fff; border: 1px solid #15171a; background: #15171a; -webkit-transition: all .5s ease; transition: all .5s ease } .gh-navbar-btn span { min-width: 66px; text-align: center; } .gh-navbar-btn:hover { border-color: #15171a; color: #fff; -webkit-transition: all .2s ease; transition: all .2s ease } .gh-mobilehead { position: absolute; top: 0; left: 0; z-index: 200; display: none; overflow: hidden; width: 100%; height: 48px; border-bottom: 1px solid rgba(0, 0, 0, .05); background: #fff; -webkit-box-shadow: #fff 0 -1px 0 0 inset, rgba(0, 0, 0, .02) 0 1px 5px; box-shadow: inset 0 -1px 0 0 #fff, 0 1px 5px rgba(0, 0, 0, .02); -webkit-transition: all .5s ease-out, background 1s ease-out; transition: all .5s ease-out, background 1s ease-out; -webkit-transition-delay: .2s; transition-delay: .2s; -webkit-backdrop-filter: blur(3px); } .gh-mobilenavbar { position: relative; z-index: 10; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 48px; font-size: 13px } .gh-nav-burger { display: block; padding: 15px; color: #738a94; font-size: 25px; line-height: 1 } .gh-nav-burger, .gh-nav-burger:hover { text-decoration: none } .gh-mobilenavbar .gh-nav-logo { position: absolute; top: 5px; right: 50%; display: block; max-width: 144px; padding: 13px 0; -webkit-transform: translateX(50%); transform: translateX(50%) } .gh-mobilenavbar .ghost-svg { width: auto; height: 23px } .gh-mobilemenu { padding: 30vh 14vw } .gh-mobilemenu a { display: block; color: #111; font-size: 3.6rem; line-height: 4.8rem; font-weight: 600; text-align: center; opacity: 0; -webkit-transition: opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99); transition: opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99); transition: transform .3s cubic-bezier(.4, .01, .165, .99), opacity .2s cubic-bezier(.4, .01, .165, .99); transition: transform .3s cubic-bezier(.4, .01, .165, .99), opacity .2s cubic-bezier(.4, .01, .165, .99), -webkit-transform .3s cubic-bezier(.4, .01, .165, .99); -webkit-transition-delay: .4s; transition-delay: .4s; -webkit-transform: scale(1.1) translateY(-25px); transform: scale(1.1) translateY(-25px) } .gh-mobilemenu a:first-child { -webkit-transition-delay: .56s; transition-delay: .56s } .gh-mobilemenu a:nth-child(2) { -webkit-transition-delay: .49s; transition-delay: .49s } .gh-mobilemenu a:nth-child(3) { -webkit-transition-delay: .42s; transition-delay: .42s } .gh-mobilemenu a:nth-child(4) { -webkit-transition-delay: .35s; transition-delay: .35s } .gh-mobilemenu a:nth-child(5) { -webkit-transition-delay: .28s; transition-delay: .28s } .gh-mobilemenu a:nth-child(6) { -webkit-transition-delay: .21s; transition-delay: .21s } .gh-mobilemenu a:nth-child(7) { -webkit-transition-delay: .14s; transition-delay: .14s } .gh-mobilemenu a:nth-child(8) { -webkit-transition-delay: .07s; transition-delay: .07s } .gh-mobilemenu a:hover { color: #fb2d8d; text-decoration: none } .gh-mobilehead-open { position: fixed; top: 0; right: 0; left: 0; z-index: 9999; overflow: hidden; margin: 0; height: 100vh; -webkit-transition: all .3s ease-in, background .5s ease-in; transition: all .3s ease-in, background .5s ease-in; -webkit-transition-delay: .3s; transition-delay: .3s } .gh-mobilehead-open .gh-mobilemenu a { opacity: 1; -webkit-transition: opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99); transition: opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99); transition: transform .6s cubic-bezier(.4, .01, .165, .99), opacity .9s cubic-bezier(.4, .01, .165, .99); transition: transform .6s cubic-bezier(.4, .01, .165, .99), opacity .9s cubic-bezier(.4, .01, .165, .99), -webkit-transform .6s cubic-bezier(.4, .01, .165, .99); -webkit-transform: scale(1) translateY(0); transform: scale(1) translateY(0) } .gh-mobilehead-open .gh-mobilemenu a:nth-child(8) { -webkit-transition-delay: .56s; transition-delay: .56s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(7) { -webkit-transition-delay: .49s; transition-delay: .49s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(6) { -webkit-transition-delay: .42s; transition-delay: .42s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(5) { -webkit-transition-delay: .35s; transition-delay: .35s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(4) { -webkit-transition-delay: .28s; transition-delay: .28s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(3) { -webkit-transition-delay: .21s; transition-delay: .21s } .gh-mobilehead-open .gh-mobilemenu a:nth-child(2) { -webkit-transition-delay: .14s; transition-delay: .14s } .gh-mobilehead-open .gh-mobilemenu a:first-child { -webkit-transition-delay: .07s; transition-delay: .07s } @media (max-width:660px) { .gh-viewport { padding-top: 68px } .gh-head { display: none } .gh-mobilehead { display: block } } .gh-main { padding: 0 4vw } .inner.flex::before { position: absolute; display: block; content: ""; top: -560px; right: -160px; width: 960px; height: 960px; border-radius: 50%; z-index: 0; background: #f5f6f6; opacity: 0.5; } @media (max-width: 940px) { .inner.flex::before { display: none; } } .gh-section { margin: 0 -4vw; padding: 60px 4vw } @media (max-width:600px) { .gh-section { padding: 10vw 4vw } } .gh-section-white { background: #fff } .gh-section-dark { color: #fff; text-shadow: rgba(0, 0, 0, .1) 0 1px 2px } .gh-section-dark h2 { color: #fff } .gh-section-dark h3 { color: #fff; font-size: 1.8rem } .gh-section-dark p { opacity: .8 } .gh-section-dark a { color: #5fbdf2 } .gh-section-dark a.gh-anchor { color: #fff } .gh-section h3 .gh-badge { margin-left: 4px; padding: 2px; font-size: .7em; vertical-align: top } .gh-section-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 1em; color: #fff; text-align: center } .gh-section-head h2 { margin: 1em 0 .3em; color: #fff; font-size: 3.6rem; font-weight: 700; } @media (max-width:660px) { .gh-section-head h2 { font-size: 4.8vw } } .gh-section-head p { max-width: 800px; margin: .8rem 0 0; color: rgba(255,255,255,.6); font-size: 2rem; line-height: 1.4em; font-weight: 400; } @media (max-width:660px) { .gh-section-head p { font-size: 1.6rem } } .gh-foot { padding: 3vw 4vw 5vw; font-size: 1.3rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .gh-foot a { color: rgba(255,255,255,.8); text-decoration: none } .gh-foot a:hover { color: #fff; text-decoration: none } .gh-foot-content { padding-top: 20px; border-top: 1px solid hsla(0,0%,100%,.11); } .gh-foot-content, .gh-foot-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; align-items: center; } .gh-foot-nav { padding-left: 60px; width: 100% } .gh-foot-col { padding: 0 10px } .gh-foot-col h4 { margin: 5px 0 10px; font-size: 1.4rem } .gh-foot-col ul { margin: 0; padding: 0; list-style: none } .gh-foot-col ul a { display: block; padding: 3px 0; min-width: 90px } .gh-foot-col li { margin: 0 } .gh-foot-col .gh-badge { position: relative; top: -1px } @media (max-width:965px) { .gh-foot-col:last-of-type { display: none } } @media (max-width:800px) { .gh-foot { text-align: center } .gh-foot-nav { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; padding: 0; max-width: none } .gh-foot-col { padding: 0 10px } .gh-foot-col:last-of-type { display: block } } @media (max-width:550px) { .gh-foot-nav { display: none } } .gh-foot-floating .gh-foot { padding-top: 2vw } .gh-foot-floating .gh-foot-content, .gh-foot-floating .gh-foot-mast { border-top: none } .gh-foot-min { padding: 0 4vw 4vw; } .gh-foot-min .gh-foot-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0; border-top: none } .gh-foot-min-nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: -15px } .gh-foot-min-logo { display: flex; align-items: center; } .gh-foot-min-logo .gscan-badge { height: 22px; margin: 0 0 2px 4px; } .gh-foot-min-back { margin-right: -15px } .gh-foot-min-item { padding: 0 15px } @media (max-width:660px) { .gh-foot-min .gh-foot-content { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row } .gh-foot-min-item:nth-child(1n+2) { display: none } } pre[class*=language-] { overflow: auto; margin: 0; padding: 2.4rem 3.2rem; border-radius: 8px } :not(pre)>code[class*=language-], pre[class*=language-] { border: none; background: #2a3644 } :not(pre)>code[class*=language-] { padding: .3em .4em; color: #343f44; font-size: .9em; text-shadow: none; white-space: normal; background: #e5eff5; border-radius: .3em } a>code[class*=language-] { color: #3eb0ef } @-webkit-keyframes bounce { 0%, 5% { -webkit-transform: translate3d(0, 2px, 0) scale(1); transform: translate3d(0, 2px, 0) scale(1) } to { background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .75)), to(hsla(0, 0%, 100%, .96))); background: linear-gradient(180deg, hsla(0, 0%, 100%, .75) 0, hsla(0, 0%, 100%, .96)); -webkit-box-shadow: rgba(0, 0, 0, .35) 0 0 1px, rgba(0, 0, 0, .1) 0 5px 6px; box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 5px 6px rgba(0, 0, 0, .1); -webkit-transform: translate3d(0, -2px, 0) scale(1); transform: translate3d(0, -2px, 0) scale(1) } } @keyframes bounce { 0%, 5% { -webkit-transform: translate3d(0, 2px, 0) scale(1); transform: translate3d(0, 2px, 0) scale(1) } to { background: -webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .75)), to(hsla(0, 0%, 100%, .96))); background: linear-gradient(180deg, hsla(0, 0%, 100%, .75) 0, hsla(0, 0%, 100%, .96)); -webkit-box-shadow: rgba(0, 0, 0, .35) 0 0 1px, rgba(0, 0, 0, .1) 0 5px 6px; box-shadow: 0 0 1px rgba(0, 0, 0, .35), 0 5px 6px rgba(0, 0, 0, .1); -webkit-transform: translate3d(0, -2px, 0) scale(1); transform: translate3d(0, -2px, 0) scale(1) } } body { background: #fff; } .gh-nav-logo, .gh-nav-logo:hover { color: #30cf43; } .gh-gscan-head { margin-bottom: 6vw; text-align: center } .gh-subhead.warning { margin-top: .5em; color: #f05230 } .gh-input-icon.select-arrow { position: absolute; display: none; bottom: 15px; right: 38px } .gh-input-icon.select-arrow svg { width: 14px; height: 8px; fill: #677d87; -webkit-transition: all .1s ease-out; transition: all .1s ease-out } .gh-input-icon.select-arrow svg g { stroke: #677d87 } .gh-input-icon.select-arrow.active { display: inherit } .report-body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start } .gh-section.report { padding-top: 24px; } .report-section { padding: 0 } .report-section.results { width: 60% } .report-section.meta, .report-section.results { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } .report-section.meta { overflow: hidden; margin-top: 25px; padding: 20px; width: 40%; border: 1px solid #e5eff5; border-radius: 5px } .image-container { margin: -20px -20px 20px; border-bottom: 1px solid #e5eff5 } .info { -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; width: 100% } .report-meta ul { margin: 0; padding: 0; list-style: none } .image-container img { max-width: 100% } .report-heading { display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 4vw; color: rgba(0,0,10,.45); margin: 4rem 0 3.2rem; padding: 0 } .result-summary .title { padding-right: 40px; font-size: 4.4rem; font-weight: 600; line-height: 1.6em; } .result-summary .title strong { color: #15171A; font-weight: 700; text-transform: capitalize; } .result-summary .title span { text-transform: uppercase; } @media (max-width: 940px) { .result-summary .title { font-size: 3.2rem; } } @media (max-width: 500px) { .result-summary .title { padding-right: 0; } } .result-summary p { margin: 0 0 .8em; color: #a0a3b7; font-size: 1.4rem; font-weight: 700; letter-spacing: .015em; line-height: 1.4em; text-transform: uppercase; } .report h3, .report h4 { line-height: 1.6 } .report h3 { display: block; font-size: 2.4rem; font-weight: 700; padding: 0; margin: 0 } .report h4 { margin: 0; font-size: 16px; font-weight: 400; opacity: 1 } .details { width: 100%; margin-top: 12px; margin-bottom: 8px; padding: 20px; background: #F9F9FA; border-radius: 3px; } .details, .details p { font-size: 1.3rem; line-height: 1.6em } .details p, .details ul { margin-bottom: 0 } .details h4 { font-size: 1.3rem; font-weight: 700; margin-top: 24px; color: #15171a; display: inline-block; } .level-group { margin: 8rem 0; } .level-group-header p { font-size: 1.45rem; font-weight: 500; } .level-group.passes { display: flex; justify-content: space-between; flex-wrap: wrap; } .level-group.passes .details { padding-top: 0 } @media (max-width: 660px) { .level-group.passes { flex-direction: column; } } .toggle-details .hide { display: none } .toggle-details { position: relative; display: inline-block; overflow: hidden; margin-top: 2px; padding: 0; height: 20px; color: #7C8B9A; font-size: 1.4rem; font-weight: 500; opacity: 1; cursor: pointer } .toggle-details:hover { color: #15171A; text-decoration: none; } .details.hide { display: none } .indicator { display: inline-block; margin-right: 6px; width: 30px; height: 30px; color: #fff; line-height: 1.5; font-weight: 700; text-align: center; background: transparent; border-radius: 100% } .health-meter { flex-shrink: 0; } .score { display: inline-block; margin-top: 12px; padding: 12px 16px; border-radius: 3px; color: #111; font-size: 2rem; font-weight: 600; } .score strong { font-size: 8rem; font-weight: 800; } @media (max-width: 940px) { .score { padding: 12px 0; } .score strong { font-size: 6rem; } } .progress-bar { width: 100%; height: 12px; margin-bottom: 2rem; border: none; background: #EBEEF0; border-radius: 6px; box-shadow: none; } .progress-bar-value { height: 12px; overflow: hidden; color: rgba(255, 255, 255, 0); white-space: nowrap; border-radius: 5px; animation: progress-bar 2s; } .progress-bar-value.passing { background: linear-gradient(135deg,#60d20d 5%,#009b7f); } .progress-bar-value.warning { background: linear-gradient(135deg,#ffca00 5%,#ff8300); } .progress-bar-value.error { background: linear-gradient(135deg,#fb2d8d 5%,#f50b23); } @keyframes progress-bar { 0% { width: 0; } } .tags li { display: inline; list-style-type: none } .tags li:after { content: "," } .tags li:last-child:after { content: "." } button[type=submit].button-add:disabled, button[type=submit].button-add:disabled:hover { color: #b3b9ba; background: #eeefef; cursor: not-allowed } .rule-group { background: #fff; } .rule { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 0 16px 24px; border-bottom: 1px solid #EBEEF0; background: none; -webkit-transition: all .3s ease; transition: all .3s ease } .rule-group article:last-of-type { border-bottom: none } .rule>p { position: relative; margin: 0 0 .8rem; color: #15171A; } .rule>p:after { content: ""; position: absolute; top: 8px; left: -24px; display: block; height: 8px; width: 8px; border-radius: 4px; } .level-group.errors .rule>p:after { background: #F50B23 } .level-group.warnings .rule>p:after { background: #FFB41F } .level-group.recommendations .rule>p:after { background: #ABB4BE } .level-group.passes .rule>p:after { background: #30CF43; top: 7px } .level-group.passes .details { padding: 0 } .gh-section-gscan-uploader { min-height: 70vh } .gh-gscan-uploader { position: relative; z-index: 999; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 360px; margin-top: 2rem; } .gh-gscan-uploader, .gh-gscan-uploader-form { display: -webkit-box; display: -ms-flexbox; display: flex } .gh-gscan-uploader-form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 400px; padding: 56px 48px; background: #fff; border-radius: 3px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.02), 0 6.7px 5.3px rgba(0, 0, 0, 0.024), 0 12.5px 10px rgba(0, 0, 0, 0.032), 0 22.3px 17.9px rgba(0, 0, 0, 0.032), 0 41.8px 56px rgba(0, 0, 0, 0.04), 0 100px 120px rgba(0, 0, 0, 0.06) ; } @media (max-width: 500px) { .gh-gscan-uploader-form { padding: 40px; box-shadow: none; } } .gh-gscan-uploader-form .gh-input svg { margin-bottom: 1rem; } .gh-gscan-uploader-form label { display: block; margin: 0 0 8px; font-size: 1.3rem; line-height: 1.3em; font-weight: 400 } .gh-gscan-uploader-form .gh-select { line-height: 1em; padding: 12px } .gh-gscan-uploader-form .gh-btn { border: none; color: #fff; background: linear-gradient(135deg,#ed26d3 5%,#ff1433); } .gh-gscan-uploader-form .gh-btn span { height: 40px; font-size: 1.6rem; font-weight: 600; line-height: 40px; background: linear-gradient(135deg,#ed26d3 5%,#ff1433); } .gh-gscan-uploader-button { min-width: 280px; padding: 32px 12px; border: 1px dashed #CED4D9; font-weight: 500 !important; text-align: center; background: #F9F9FA; cursor: pointer; } @media (max-width:940px) { .report-heading { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: flex-start; } .result-summary { -webkit-box-flex: 1; -ms-flex: 1 1 380px; flex: 1 1 380px; margin-bottom: .2em } } .gh-section-themenewsletter { padding: 6vw 4vw; background: #000; } .newsletter-form-container { position: relative; z-index: 900; width: 85%; max-width: 400px; margin: 4vw auto; color: #7C8B9A; text-shadow: none; border-radius: 10px; -webkit-transform: scale(1.15); transform: scale(1.15); } .newsletter-form { width: 100% } .newsletter-form-group { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #1e2025; border-radius: 3px; } .newsletter-form-group svg { width: 24px; height: 24px; margin: 2px 0 0 12px; } .newsletter-form-group svg path { stroke: rgba(255,255,255,.6); } .newsletter-form-group .gh-input { width: 100%; padding: 12px 8px; color: #fff; background: none; border: none; } .newsletter-form-group .gh-btn { -ms-flex-negative: 0; flex-shrink: 0; margin: 4px; } .newsletter-form small { display: block; margin: 10px 0 0; color: rgba(255,255,255,.6); font-size: 1rem; line-height: 1.5em; font-weight: 600; text-align: center; } .newsletter-confirmed-message, .newsletter-success-message { display: none; text-align: center; border: 1px solid #a4d037; background: #fff; border-radius: 10px } .successfully-confirmed .newsletter-confirmed-message, .successfully-subscribed .newsletter-success-message { display: block } .gh-foot { background: #15171a; } .gh-foot-support { display: -webkit-box; display: -ms-flexbox; display: flex; } .gh-support-email, .gh-support-slack { display: block; position: relative; margin: 40px 0; padding: 25px 80px 55px 0; width: 50%; text-align: left } .gh-foot-support svg { position: absolute; top: 30px; left: 35px; width: 50px; height: auto } .gh-support-email svg { fill: #a4d037 } .gh-support-slack svg { fill: #ad26b4 } .gh-foot-support h4 { margin-top: 0; color: #fff; font-size: 3.2rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.25em; } .gh-foot-support p { margin-bottom: 0; color: rgba(255,255,255,.6); font-size: 2rem; font-weight: 400; line-height: 1.45em } .gh-support-email a { color: #B5FF18; font-weight: 700; } .gh-support-slack a { color: #ff247d; font-weight: 700; } .gh-foot-support a:hover { color: #fff; } @media (max-width:800px) { .gh-foot-support { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .gh-support-email, .gh-support-slack { width: 100% } }