gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.15k stars 10.33k forks source link

[gatsby-plugin-netlify-cms] Preview stylesheet is not registering #15126

Closed vai0 closed 4 years ago

vai0 commented 5 years ago

Description

After updating gatsby-plugin-netlify-cms to 4.1.0 from 3.0.9, none of the netlify preview templates have styles applied.

What's interesting is if I import netlify-cms instead of netlify-cms-app, this problem goes away. Looking at the chrome's network tab, it appears cms.css is not getting picked up when importing netlify-cms-app

cms.js

import CMS from `netlify-cms`;
...
CMS.registerPreviewStyle(`cms.css`);

It seems like the only documented difference that probably matters between netlify-cms and netlify-cms-app is react and react-dom are now peerDependencies - although this doesn't really explain why this is happening.

Environment

Run gatsby info --clipboard in your project directory and paste the output here.

System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Shell: 4.4.23 -
/nix/store/mcyvp1s45scjkkhyb1m16aqlsb8wr6hs-bash-interactive-4.4-p23/bin/bash
  Binaries:
    Node: 10.15.3 -
/nix/store/47wbs3fgygg6i7za4knbcqpmrwlckqy4-bifrost-env/bin/node
    Yarn: 1.16.0 - /usr/bin/yarn
    npm: 6.4.1 - /nix/store/47wbs3fgygg6i7za4knbcqpmrwlckqy4-bifrost-env/bin/npm
  Languages:
    Python: 3.6.8 - /home/jchi/Projects/bifrost/backend/venv/bin/python
  Browsers:
    Chrome: 73.0.3683.103
    Firefox: 60.7.1
  npmPackages:
    gatsby: 2.10.4 => 2.10.4
    gatsby-cli: 2.7.2 => 2.7.2
    gatsby-link: 2.2.0 => 2.2.0
    gatsby-plugin-intercom-spa: 0.1.0 => 0.1.0
    gatsby-plugin-netlify-cms: 4.1.0-dev-1561486008141 => 4.1.0-dev-1561486008141
    gatsby-plugin-polyfill-io: 1.1.0 => 1.1.0
    gatsby-plugin-react-helmet: 3.1.0 => 3.1.0
    gatsby-plugin-root-import: 2.0.5 => 2.0.5
    gatsby-plugin-sass: 2.1.0 => 2.1.0
    gatsby-plugin-sentry: 1.0.1 => 1.0.1
    gatsby-plugin-sitemap: 2.2.0 => 2.2.0
    gatsby-source-apiserver: 2.1.3 => 2.1.3
    gatsby-source-filesystem: 2.1.0 => 2.1.0
    gatsby-transformer-json: 2.2.0 => 2.2.0
sidharthachatterjee commented 5 years ago

Hey! Could you link to a minimal reproduction of this?

CC @erquhart

gatsbot[bot] commented 5 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contributefor more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

vai0 commented 5 years ago

keep open - will eventually get a repro up. very busy atm :/

vai0 commented 5 years ago

As an update - just realized that this issue only exists in development. Post-build the previews render just fine. Took a quick look at the networking tab again and realized that cms.css IS being loaded in, but the contents appear to be HTML rather than CSS

cms.css in development

<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta property="og:image" content="https://www.memsql.com/images/og_share_image.png"/><meta name="google-site-verification" content="WC0xNzwn7LVoSwf3TnPurxnJWU56ah_tylrzKcBW-cQ"/><meta property="og:image:width" content="400"/><meta property="og:image:height" content="400"/><meta property="st:type" content="com"/><script>(function(d) {var config = { kitId: 'hhh6oai', scriptTimeout: 3000, async: true }, h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s) })(document);</script><script async="" src="//cdn.bizible.com/scripts/bizible.js"></script><script async="" src="https://www.memsql.com/api/v1/get-cookie-banner/"></script><script async="" src="/scripts/segment.min.js"></script><title data-react-helmet="true"></title><link rel="sitemap" type="application/xml" href="/sitemap.xml"/><script src="/socket.io/socket.io.js"></script></head><body><div id="___gatsby"></div><script>
          window.IntercomAppId = 'oc3xi4bh';
          window.IntercomIncludeInDevelopment = true;
          (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/oc3xi4bh';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()
          </script><script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Array.from,String.prototype.startsWith,Object.entries,Array.prototype.findIndex,Array.prototype.includes,Set"></script><script src="/commons.js"></script></body></html>

cms.css post-build

@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:100;src:local("Lato Thin "),local("Lato-Thin"),url(static/lato-latin-100-f8028e61362a54aa64dcb26e8063d0d7.woff2) format("woff2"),url(static/lato-latin-100-752c20224144760a496fb9e19a62f616.woff) format("woff")}@font-face{font-family:Lato;font-style:italic;font-display:swap;font-weight:100;src:local("Lato Thin italic"),local("Lato-Thinitalic"),url(static/lato-latin-100italic-ef884f11c6adb5df51c446911612e7af.woff2) format("woff2"),url(static/lato-latin-100italic-6ea8380326f67e10380953b188d96a2b.woff) format("woff")}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:300;src:local("Lato Light "),local("Lato-Light"),url(static/lato-latin-300-bbbd26aeee9c5b967e35933bce02d358.woff2) format("woff2"),url(static/lato-latin-300-ba2452bdc790a4fee05202eac3c092b3.woff) format("woff")}@font-face{font-family:Lato;font-style:italic;font-display:swap;font-weight:300;src:local("Lato Light italic"),local("Lato-Lightitalic"),url(static/lato-latin-300italic-7d718d7299ab7f9fab17d7d4f13ded57.woff2) format("woff2"),url(static/lato-latin-300italic-06eb177ee6c1960bcd79f1cf8c812000.woff) format("woff")}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:400;src:local("Lato Regular "),local("Lato-Regular"),url(static/lato-latin-400-f1a4a058fbba1e35a406188ae7eddaf8.woff2) format("woff2"),url(static/lato-latin-400-62fb51e9e645f63599238881b9de15dd.woff) format("woff")}@font-face{font-family:Lato;font-style:italic;font-display:swap;font-weight:400;src:local("Lato Regular italic"),local("Lato-Regularitalic"),url(static/lato-latin-400italic-b45e52f342dc29c8553f51a99f924871.woff2) format("woff2"),url(static/lato-latin-400italic-c4082958a18f04bd32a3d3e1f5e390a5.woff) format("woff")}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:700;src:local("Lato Bold "),local("Lato-Bold"),url(static/lato-latin-700-7fbbfd1610770d594aef639cfefdd0b0.woff2) format("woff2"),url(static/lato-latin-700-96759e32fdc800c78b527a3e53fe2be6.woff) format("woff")}@font-face{font-family:Lato;font-style:italic;font-display:swap;font-weight:700;src:local("Lato Bold italic"),local("Lato-Bolditalic"),url(static/lato-latin-700italic-c66215e09d2420885ad1a1f3eb2bac37.woff2) format("woff2"),url(static/lato-latin-700italic-0a06ba1bdf385495f2679324cfbedd13.woff) format("woff")}@font-face{font-family:Lato;font-style:normal;font-display:swap;font-weight:900;src:local("Lato Black "),local("Lato-Black"),url(static/lato-latin-900-f2de2c6ec69b0c11f1bc44c5348c2f35.woff2) format("woff2"),url(static/lato-latin-900-d79dd0661ba130ec7a7e7c060fcb7e09.woff) format("woff")}@font-face{font-family:Lato;font-style:italic;font-display:swap;font-weight:900;src:local("Lato Black italic"),local("Lato-Blackitalic"),url(static/lato-latin-900italic-fd67cf72cde7716bdadf8a3992b37fa2.woff2) format("woff2"),url(static/lato-latin-900italic-e792d6c62329e025ca1cbea793ba8de5.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-display:swap;font-weight:400;src:local("Inconsolata Regular "),local("Inconsolata-Regular"),url(static/inconsolata-latin-400-e41ccb14c58f5986b994131632b843c7.woff2) format("woff2"),url(static/inconsolata-latin-400-626c21a55285b4a642ccacd0c6e05a6d.woff) format("woff")}@font-face{font-family:Inconsolata;font-style:normal;font-display:swap;font-weight:700;src:local("Inconsolata Bold "),local("Inconsolata-Bold"),url(static/inconsolata-latin-700-927962c39f8fac064282871c9af168a1.woff2) format("woff2"),url(static/inconsolata-latin-700-299a2b67687ea24dce6b0678ecfe7e0e.woff) format("woff")}
/*!
 * Font Awesome Free 5.4.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1em}.svg-inline--fa.fa-stack-2x{height:2em;width:2em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;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;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:-.25em}sup{top:-.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}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .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}[hidden],template{display:none}.header-1{font-family:Freight-Sans-Pro,Lato,sans-serif;font-size:2.5rem;font-weight:700;color:#4f4f4f;text-align:center;line-height:1.2em;margin-top:0}@media (max-width:600px){.header-1{font-size:2em}}.header-2{font-family:Freight-Sans-Pro,Lato,sans-serif;font-size:3rem;font-weight:300;color:#4f4f4f;text-align:center;line-height:1.2em;margin-top:0;margin-bottom:30px}@media (max-width:600px){.header-2{font-size:2.5rem}}.header-3{font-family:Freight-Sans-Pro,Lato,sans-serif;font-size:1.75rem;font-weight:700;color:#4f4f4f;text-align:center;line-height:1.2em;margin-top:0;margin-bottom:30px}@media (max-width:600px){.header-3{font-size:1.5rem}}.header-4{font-size:1.5rem;margin:0}.header-4,.header-5{font-family:Lato,sans-serif;font-weight:700;color:#4f4f4f;text-align:center;line-height:1.5em}.header-5{font-size:1.125rem}.header-6{font-size:1rem;font-weight:700;line-height:1.5em}.header-6,.headline{font-family:Lato,sans-serif;color:#4f4f4f;text-align:center}.headline{font-size:3rem;font-weight:300;line-height:1.3em}@media (max-width:600px){.headline{font-size:2rem}}.title-1{font-family:Lato,sans-serif;font-size:2.25rem;font-weight:700;color:#4f4f4f;text-align:center;line-height:1.3em}@media (max-width:600px){.title-1{font-size:2rem}}.subheader-2{font-family:Lato,sans-serif;font-size:1.5rem;font-weight:400;color:#828282;line-height:1.5em}@media (max-width:600px){.subheader-2{font-size:1.25rem}}.subheader{font-family:Lato,sans-serif!important;font-size:1.375rem!important;font-weight:700!important;color:#4f4f4f;line-height:1.3em}.small-header-2{font-weight:700!important}.small-header,.small-header-2{font-family:Lato,sans-serif!important;font-size:1.125rem!important;color:#4f4f4f;line-height:1.5em}.small-header{font-weight:900!important}.body-4{font-family:Lato,sans-serif;font-size:1.75rem;font-weight:300;color:#4f4f4f;line-height:1.5em}@media (max-width:600px){.body-4{font-size:1.5rem}}.body-3{font-weight:700!important}.body-2,.body-3{font-family:Lato,sans-serif!important;font-size:1.125rem!important;color:#828282;line-height:1.5em}.body-2{font-weight:400!important}.body-1{font-size:1rem!important}.body-1,.caption{font-family:Lato,sans-serif!important;font-weight:400!important;color:#828282;line-height:1.5em}.caption{font-size:.75rem!important}.text-align-left{text-align:left!important}.text-align-center{text-align:center!important}.size-1{font-size:3rem!important}.size-2{font-size:2.5rem!important}.size-3{font-size:1.75rem!important}.size-4{font-size:1.5rem!important}.size-5{font-size:1.125rem!important}.size-6{font-size:1rem!important}.size-7{font-size:.875rem!important}.size-8{font-size:.75rem!important}.font-1{font-family:Freight-Sans-Pro,Lato,sans-serif!important}.font-2{font-family:Lato,sans-serif!important}.color-error{color:#d5322f!important}.color-success{color:#5bc759!important}.color-mine-shaft{color:#333!important}.color-emperor{color:#4f4f4f!important}.color-gray{color:#828282!important}.margin-top-0{margin-top:0!important}.margin-top-xxsm{margin-top:10px!important}.margin-top-xsm{margin-top:20px!important}.margin-top-sm{margin-top:40px!important}.margin-top-md{margin-top:60px!important}.margin-top-lg{margin-top:80px!important}.margin-top-xlg{margin-top:100px!important}.margin-top-xxlg{margin-top:120px!important}.margin-right-0{margin-right:0!important}.margin-right-xxsm{margin-right:10px!important}.margin-right-xsm{margin-right:20px!important}.margin-right-sm{margin-right:40px!important}.margin-right-md{margin-right:60px!important}.margin-right-lg{margin-right:80px!important}.margin-right-xlg{margin-right:100px!important}.margin-right-xxlg{margin-right:120px!important}.margin-bottom-0{margin-bottom:0!important}.margin-bottom-xxsm{margin-bottom:10px!important}.margin-bottom-xsm{margin-bottom:20px!important}.margin-bottom-sm{margin-bottom:40px!important}.margin-bottom-md{margin-bottom:60px!important}.margin-bottom-lg{margin-bottom:80px!important}.margin-bottom-xlg{margin-bottom:100px!important}.margin-bottom-xxlg{margin-bottom:120px!important}.margin-left-0{margin-left:0!important}.margin-left-xxsm{margin-left:10px!important}.margin-left-xsm{margin-left:20px!important}.margin-left-sm{margin-left:40px!important}.margin-left-md{margin-left:60px!important}.margin-left-lg{margin-left:80px!important}.margin-left-xlg{margin-left:100px!important}.margin-left-xxlg{margin-left:120px!important}.padding-top-0{padding-top:0!important}.padding-top-xxsm{padding-top:10px!important}.padding-top-xsm{padding-top:20px!important}.padding-top-sm{padding-top:40px!important}.padding-top-md{padding-top:60px!important}.padding-top-lg{padding-top:80px!important}.padding-top-xlg{padding-top:100px!important}.padding-top-xxlg{padding-top:120px!important}.padding-right-0{padding-right:0!important}.padding-right-xxsm{padding-right:10px!important}.padding-right-xsm{padding-right:20px!important}.padding-right-sm{padding-right:40px!important}.padding-right-md{padding-right:60px!important}.padding-right-lg{padding-right:80px!important}.padding-right-xlg{padding-right:100px!important}.padding-right-xxlg{padding-right:120px!important}.padding-bottom-0{padding-bottom:0!important}.padding-bottom-xxsm{padding-bottom:10px!important}.padding-bottom-xsm{padding-bottom:20px!important}.padding-bottom-sm{padding-bottom:40px!important}.padding-bottom-md{padding-bottom:60px!important}.padding-bottom-lg{padding-bottom:80px!important}.padding-bottom-xlg{padding-bottom:100px!important}.padding-bottom-xxlg{padding-bottom:120px!important}.padding-left-0{padding-left:0!important}.padding-left-xxsm{padding-left:10px!important}.padding-left-xsm{padding-left:20px!important}.padding-left-sm{padding-left:40px!important}.padding-left-md{padding-left:60px!important}.padding-left-lg{padding-left:80px!important}.padding-left-xlg{padding-left:100px!important}.padding-left-xxlg{padding-left:120px!important}body{font-family:Freight-Sans-Pro,Lato,sans-serif;margin:0;text-rendering:optimizeLegibility}a{color:#08b}a,a:focus,a:hover{text-decoration:none}@media (max-width:860px) and (max-height:420px){#content{padding-top:0}}hr{height:0;margin:0 auto;border:0;border-top:1px solid #e6e6e6}pre{display:block;font-size:15px;line-height:1.42857143;color:#333;padding:10.5px;margin:0 0 11px;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;word-break:break-all;word-wrap:break-word}@media (max-width:860px){.no-mobile{display:none!important}}.wf-loading{visibility:hidden}.wf-active,.wf-inactive{visibility:visible}.mobile-only{display:none}@media (max-width:860px){.mobile-only{display:block}}.desktop-only{display:block}@media (max-width:600px){.desktop-only{display:none}}span.st-ui-type-heading.st-spelling-suggestion-link{display:none}a.st-prev{margin-right:10px}html{box-sizing:border-box}*,:after,:before{box-sizing:inherit}.container-lg{max-width:1080px;padding-left:40px;padding-right:40px;margin:0 auto}@media (max-width:600px){.container-lg{padding-left:30px;padding-right:30px}}.container-xlg{max-width:1200px;padding-left:40px;padding-right:40px;margin:0 auto}.container{max-width:1200px;margin:40px auto}.container:after{clear:both;content:"";display:table}.section{padding-top:80px;padding-bottom:80px}@media (max-width:600px){.section{padding-top:60px;padding-bottom:60px}}.section.blue-gradient{color:#fff;background:linear-gradient(103.43deg,#08b 32.78%,#55cdff 99.99%)}.section.dark-blue-gradient{color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#17354a),to(#071d2c));background:linear-gradient(180deg,#17354a,#071d2c)}.section.black-gradient{color:#fff;background:-webkit-gradient(linear,left top,left bottom,color-stop(19.82%,#4f4f4f),to(#333));background:linear-gradient(180deg,#4f4f4f 19.82%,#333)}.section.is-large{padding-top:100px;padding-bottom:100px}@media (max-width:600px){.section.is-large{padding-top:60px;padding-bottom:60px}}.section.animated-bg{position:relative;padding:500px 0;margin:-140px 0}.section.animated-bg .container-lg{margin:-40px auto}.container-document{font-family:Lato,sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:#828282;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container-document strong{color:#4f4f4f}.container-document ul li{margin-bottom:10px}.container-document .table-of-contents{margin:40px 0}.container-document .table-of-contents ul{list-style:none;padding-left:20px}.container-document .table-of-contents a{display:block;text-decoration:underline;color:#4f4f4f}.table{margin:40px -15px}.table p{margin-top:0}.table .table-row{display:flex;justify-content:space-around;border-radius:8px}.table .table-row.table-header:hover{background:none}.table .table-row:hover{background-color:#f2f2f2;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.table .table-row .table-col{flex:1 1;width:0;padding:15px;word-wrap:break-word}.columns{display:flex;justify-content:space-between;width:100%}@media (max-width:600px){.columns{flex-direction:column}}.columns .column{flex:1 1;padding-right:80px}.columns .column:last-child{padding-right:0}@media (max-width:600px){.columns .column{padding:0}}.column-1{max-width:1200px;margin-left:auto;margin-right:auto}.column-1:after{clear:both;content:"";display:table}.column-1 .column{float:left;display:block;margin-right:2.35765%;width:82.94039%;margin-left:8.5298%}.column-1 .column:last-child{margin-right:0}.column-1 .column.whitepaper{margin-bottom:40px}.column-1 .column.whitepaper h2{margin-top:40px;margin-bottom:20px}.column-1 .column.whitepaper h6,.column-1 .column.whitepaper img{display:block;margin:auto;text-align:center;max-width:100%}.column-1 .column.whitepaper h4{font-size:22px}.column-1 .column.whitepaper h6{font-size:14px}.col-md-12 li{color:#707070}.column-1 .columns-2 .column.inner{margin:0}.column-1 .columns-2 .column.inner img{width:100%;margin-top:0}.column-1 .columns-2 .column.inner p{color:#000;font-size:16px;line-height:1.5em}.columns-2{max-width:1200px;margin-left:auto;margin-right:auto;padding-top:40px;padding-bottom:40px}.columns-2:after{clear:both;content:"";display:table}.columns-2 img{margin-top:20px;width:98%}.columns-2.enterprise-grade .column.left{width:20%;max-width:400px;padding:0}.columns-2.enterprise-grade .column.left img{max-width:100%}.columns-2.enterprise-grade .column.right{width:77%;padding-right:0}.columns-2.enterprise-grade .column.right h2,.columns-2.enterprise-grade .column.right p.lead-cloud{text-align:left;margin:0 0 18px}.columns-2.enterprise-grade .column.right h2 a.btn-cloud-blue,.columns-2.enterprise-grade .column.right p.lead-cloud a.btn-cloud-blue{margin:0}.columns-2.enterprise-grade .column.right h2{font-size:38px;font-weight:300}.columns-2.p-top-40{padding-top:40px}.columns-2 .well{margin-bottom:0}.columns-2 .careervid{margin-top:0;padding-top:0}.columns-2 .column{padding:0 30px;text-align:left}@media (min-width:861px){.columns-2 .column{width:48.82117%}.columns-2 .column,.columns-2 .column.w-8{float:left;display:block;margin-right:2.35765%}.columns-2 .column.w-8{width:65.88078%}.columns-2 .column.w-8:last-child{margin-right:0}.columns-2 .column.w-4{float:left;display:block;margin-right:2.35765%;width:31.76157%}.columns-2 .column.w-4:last-child,.columns-2 .column:last-child{margin-right:0}}.columns-2 .column img{width:100%;height:auto}.columns-2 .column img.not-full{vertical-align:middle;width:96px}.columns-2 .column li,.columns-2 .column p{color:#707070;font-weight:400;font-size:18px;line-height:1.6em}.columns-2 .column li a,.columns-2 .column p a{color:#08b;text-decoration:none}.columns-2 .column h3{font-size:28px;line-height:1em;color:#404040;font-weight:400}.columns-2 .column.black li,.columns-2 .column.black p{color:#000;font-weight:300}.columns-3{max-width:1200px;margin-left:auto;margin-right:auto;margin-bottom:50px}.columns-3:after{clear:both;content:"";display:table}@media (max-width:860px){.columns-3{padding:0 6%}}.columns-3.product{margin-top:0}.columns-3.solutions{margin-bottom:80px}.columns-3.solutions h4{text-transform:uppercase}.columns-3.cloud{margin-top:80px;margin-bottom:80px}.columns-3.cloud p{margin-top:-12px}.columns-3.cloud h4{color:#404040;font-size:1.2em;margin-top:15px}.columns-3 .color-wrap{margin:0 12%}.columns-3.tabular{text-align:left;margin-bottom:20px}.columns-3 .column.tabular{text-align:left}.columns-3 .column.tabular h4{margin-left:10%;font-size:18px;text-transform:uppercase;margin-bottom:0;line-height:1.1em}@media (min-width:861px){.columns-3 .column{float:left;display:block;margin-right:2.35765%;width:31.76157%;text-align:center}.columns-3 .column:last-child{margin-right:0}.columns-3 .column img{width:25%}.columns-3 .column.long p{text-align:left;margin:12px 3%;width:96%}.columns-3 .column p{width:80%;margin-left:10%;color:#707070;font-size:16px;font-weight:400;line-height:1.6em}.columns-3 .column a{color:#08b;font-weight:500;text-decoration:none}.columns-3 .column a:focus,.columns-3 .column a:hover{text-decoration:none;opacity:.6}.columns-3 .column .heading-container{height:30px;display:block}.columns-3 .column .heading-container h4{color:#404040;font-size:18px;font-weight:600;margin-bottom:10px;position:relative;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.columns-3 .column.color{margin-right:0;width:33%}.columns-3 .column.color h4{color:#fff}.columns-3 .column.color p{color:#fff;line-height:16px}.columns-3 .column.color.yellow{background-color:#f5ba60}.columns-3 .column.color.blue{background-color:#146374}.columns-3 .column.color.teal{background-color:#64bfc2}}@media (max-width:860px){.columns-3 .column{text-align:center}.columns-3 .column img{width:25%;vertical-align:middle}.columns-3 .column p{width:80%;margin-left:10%;color:#707070;font-size:16px;font-weight:400;line-height:1.6em}.columns-3 .column a{color:#08b;font-weight:500;text-decoration:none}.columns-3 .column a:focus,.columns-3 .column a:hover{text-decoration:none;color:#000}}.columns-4{max-width:1200px;margin-left:auto;margin-right:auto;margin-bottom:50px}.columns-4:after{clear:both;content:"";display:table}@media (max-width:860px){.columns-4{padding:0 6%}}@media (min-width:861px){.columns-4 .column{float:left;display:block;margin-right:2.35765%;width:23.23176%;text-align:center;background:#f1f3f2;height:250px}.columns-4 .column:last-child{margin-right:0}.columns-4 .column h4{font-weight:600;color:#404040;width:80%;margin-left:10%;font-size:18px}.columns-4 .column p{width:80%;margin-left:10%;color:#707070;font-size:16px;font-weight:400;line-height:1.6em}.columns-4 .column a{color:#08b;font-weight:500;text-decoration:none}.columns-4 .column a:focus,.columns-4 .column a:hover{text-decoration:none;opacity:.6}}@media (max-width:860px){.columns-4 .column{text-align:center}.columns-4 .column img{width:25%}.columns-4 .column p{width:80%;margin-left:10%;color:#707070;font-size:16px;font-weight:400;line-height:1.6em}.columns-4 .column a{color:#08b;font-weight:500;text-decoration:none}.columns-4 .column a:focus,.columns-4 .column a:hover{text-decoration:none;color:#000}}.narrow-well>.columns-4>.column{background:#fff}.narrow-well>.columns-4>.column p{width:80%;margin-left:10%;color:#707070;font-size:16px;font-weight:400;line-height:1.6em}.white-panel-border{padding:64px 0;text-align:center;border-bottom:1px solid #e2e2e2;width:96%;max-width:1100px;margin:auto}.white-panel-border.no-border{border-bottom:0}.white-panel-border.no-margin{width:100%;max-width:unset;margin:0}.white-panel-border.contact-us,.white-panel-border.features{padding:32px 0}.white-panel-border.cloud-last{border-bottom:0 solid #fff}.white-panel-border.left p{text-align:left;color:#4f4f4f;max-width:1000px}.white-panel-border h2{font-size:48px;line-height:130%;color:#4f4f4f;font-weight:300}.white-panel-border h2.feature-title{font-size:40px;line-height:130%;color:#4f4f4f;font-weight:300;margin-bottom:0}.white-panel-border h2.contact-us-title{font-size:40px;line-height:130%;color:#4f4f4f;font-weight:300;margin-bottom:20px}.white-panel-border p.ready{text-align:center;font-size:30px;color:#4f4f4f;margin-bottom:24px}.white-panel-border img.laptop{width:100%;max-width:800px;margin:auto}.white-panel-border img.laptop-cloud{width:100%;max-width:900px;margin:auto}.white-panel-border img.distribute-instantly{width:90%;max-width:700px;margin:auto}.white-panel-border img.memsql-diagram{width:90%;max-width:800px;margin:auto}.white-panel-border img.memsql-diagram.lines{max-width:600px;margin-top:-16px}.white-panel-border img.pipelines-arch{max-width:98%}.white-panel-border p{font-size:18px;line-height:130%;color:#828282;opacity:1;max-width:760px;margin:12px auto}.white-panel-border p.lead{font-size:24px;line-height:130%;color:#828282;width:90%;max-width:800px;font-weight:300;margin:auto auto 36px}.white-panel-border p.lead.dark{color:#4f4f4f}.white-panel-border p.lead-cloud{font-size:34px;line-height:130%;color:#4f4f4f;width:90%;max-width:870px;font-weight:300;margin:auto auto 36px}.white-panel-border p.lead-cloud a.btn-cloud-blue{color:#fff;font-size:14px;font-weight:600;padding:8px 30px;background-color:#08b;border-radius:4px;border:0;margin-left:12px}.white-panel-border p.lead-cloud a.btn-cloud-blue:hover{opacity:.8}.white-panel-border p.sub-lead{font-size:24px;line-height:130%;color:#828282;width:90%;max-width:830px;font-weight:300;margin:30px auto 36px}.white-panel-border p.sub-lead.dark{color:#4f4f4f;font-weight:400}.white-panel-border p.sub-lead a.btn-cloud-blue{color:#fff;font-size:14px;font-weight:600;padding:8px 30px;background-color:#08b;border-radius:4px;border:0;margin-left:12px}.white-panel-border p.sub-lead a.btn-cloud-blue:hover{opacity:.8}.white-panel-border:not(.no-margin) .columns-2,.white-panel-border:not(.no-margin) .columns-3{width:94%;max-width:800px;margin-left:auto;margin-right:auto;padding-top:20px}.white-panel-border:not(.no-margin) .columns-2.img-120 .column img,.white-panel-border:not(.no-margin) .columns-3.img-120 .column img{height:120px}.white-panel-border:not(.no-margin) .columns-2.img-120-product,.white-panel-border:not(.no-margin) .columns-3.img-120-product{max-width:1000px}.white-panel-border:not(.no-margin) .columns-2.img-120-product .column img,.white-panel-border:not(.no-margin) .columns-3.img-120-product .column img{height:120px}.white-panel-border:not(.no-margin) .columns-2.img-120-product .column span.featured-feature,.white-panel-border:not(.no-margin) .columns-3.img-120-product .column span.featured-feature{font-size:12px;color:#fff;background:#47b9e8;border-radius:4px;padding:2px 5px;margin-left:8px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-features,.white-panel-border:not(.no-margin) .columns-3.img-120-product-features{max-width:1000px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-features .column img,.white-panel-border:not(.no-margin) .columns-3.img-120-product-features .column img{height:100px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-features .column span.featured-feature,.white-panel-border:not(.no-margin) .columns-3.img-120-product-features .column span.featured-feature{font-size:12px;color:#fff;background:#47b9e8;border-radius:4px;padding:2px 5px;margin-left:8px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-contact-us,.white-panel-border:not(.no-margin) .columns-3.img-120-product-contact-us{max-width:1000px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-contact-us .column,.white-panel-border:not(.no-margin) .columns-3.img-120-product-contact-us .column{margin-bottom:40px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-contact-us .column img,.white-panel-border:not(.no-margin) .columns-3.img-120-product-contact-us .column img{height:100px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-contact-us .column span.featured-feature,.white-panel-border:not(.no-margin) .columns-3.img-120-product-contact-us .column span.featured-feature{font-size:12px;color:#fff;background:#47b9e8;border-radius:4px;padding:2px 5px;margin-left:8px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-inputs,.white-panel-border:not(.no-margin) .columns-3.img-120-product-inputs{max-width:1000px}.white-panel-border:not(.no-margin) .columns-2.img-120-product-inputs .column img,.white-panel-border:not(.no-margin) .columns-3.img-120-product-inputs .column img{height:78px}.white-panel-border:not(.no-margin) .columns-2.features,.white-panel-border:not(.no-margin) .columns-3.features{max-width:1000px}.white-panel-border:not(.no-margin) .columns-2.features .column,.white-panel-border:not(.no-margin) .columns-3.features .column{text-align:left}.white-panel-border:not(.no-margin) .columns-2.features .column .feature-list-item,.white-panel-border:not(.no-margin) .columns-3.features .column .feature-list-item{margin-bottom:24px}@media (min-width:861px){.white-panel-border:not(.no-margin) .columns-2.features .column .feature-list-item,.white-panel-border:not(.no-margin) .columns-3.features .column .feature-list-item{min-height:220px;margin-bottom:unset}}.white-panel-border:not(.no-margin) .columns-2.features .column p,.white-panel-border:not(.no-margin) .columns-3.features .column p{color:#4f4f4f;font-size:18px;opacity:1}.white-panel-border:not(.no-margin) .columns-2.ingest .column img,.white-panel-border:not(.no-margin) .columns-3.ingest .column img{height:78px}.white-panel-border:not(.no-margin) .columns-2.ecosystem,.white-panel-border:not(.no-margin) .columns-3.ecosystem{width:100%;max-width:unset}.white-panel-border .columns-2.features .column p,.white-panel-border .columns-3.features .column p{text-align:left}.white-panel-border .columns-2 .column img,.white-panel-border .columns-3 .column img{height:48px;width:auto}.white-panel-border .columns-2 .column p,.white-panel-border .columns-3 .column p{font-size:18px;line-height:130%;color:#828282}.white-panel-border .columns-2 .column p.title,.white-panel-border .columns-3 .column p.title{font-weight:600;color:#4f4f4f;margin-bottom:-4px;margin-top:4px}.white-panel-border .columns-2.diagram,.white-panel-border .columns-3.diagram{width:90%;max-width:870px;margin:auto;padding-top:0}.white-panel-border .columns-2.diagram .column,.white-panel-border .columns-3.diagram .column{margin-top:32px}.white-panel-border .columns-2 .column{text-align:center}.white-panel-border .columns-2 .column img{height:120px}.white-panel-border .columns-2 .column p{text-align:center}.white-panel-border p.line-title{margin-top:0;margin-left:5%;width:90%;font-size:18px;line-height:120%;font-weight:600;margin-bottom:0;color:#4f4f4f!important}.white-panel-border p.line-body{margin-left:5%;width:90%;font-size:18px;line-height:120%;color:#828282}.white-panel-border.cta{background-color:#fcfcfc;padding:12px 0}.white-panel-border.cta p{max-width:800px;text-align:left}@media (max-width:860px){.white-panel-border.cta p{text-align:center}}.white-panel-border.cta p .darkbold{color:#4f4f4f;weight:600}.white-panel-border.cta p a.btn.clear{color:#4f4f4f;border-radius:4px;border:1px solid #bdbdbd;padding:8px 20px;margin-left:24px;opacity:.8}.white-panel-border.cta p a.btn.clear:hover{opacity:1}@media (max-width:860px){.white-panel-border.cta p a.btn.clear{margin-top:16px}}.white-panel-border.cta p a.btn.fill{background:#08b;color:#fff;border-radius:4px;padding:8px 20px;margin-left:8px;border:0;-webkit-transition-duration:.5s;transition-duration:.5s}@media (max-width:860px){.white-panel-border.cta p a.btn.fill{margin-top:16px}}html{font-size:100%}a.btn{text-decoration:none;color:inherit}.btn{font-family:Lato,sans-serif;display:inline-block;font-weight:500;line-height:1em;text-align:center;white-space:nowrap;-webkit-transition:all .15s ease-in-out 0s;transition:all .15s ease-in-out 0s;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;letter-spacing:.5px}.btn[disabled]{opacity:.5;pointer-events:none;cursor:default}.btn .icon{margin-right:.5em}.btn.ghost{border:1px solid transparent}.btn.ghost,.btn.secondary{color:#4f4f4f;background:hsla(0,0%,100%,0)}.btn.secondary,.btn.secondary-alt{border:1px solid #bdbdbd}.btn.secondary-alt{color:#4f4f4f;background:#fff}.btn.secondary:focus,.btn.secondary:hover{background:#fff;border:1px solid #b7b7b7;box-shadow:0 1px 5px rgba(60,60,60,.2)}.btn.secondary:active{background:#f2f2f2}.btn.primary{font-weight:500;color:#fff;background:#08b;border:1px solid #08b}.btn.primary:focus,.btn.primary:hover{background:#008fc5;border:1px solid #008fc5;box-shadow:0 1px 5px rgba(60,60,60,.2)}.btn.primary:active{background:#0082b3;border:1px solid #0082b3}.btn.ghost-dk{font-size:14px;border:1px solid transparent}.btn.ghost-dk,.btn.secondary-dk{color:#fff;background:hsla(0,0%,100%,0)}.btn.secondary-dk{border:1px solid hsla(0,0%,100%,.6)}.btn.ghost-dk:focus,.btn.ghost-dk:hover,.btn.secondary-dk:focus,.btn.secondary-dk:hover{color:#fff;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.8);box-shadow:0 1px 5px rgba(60,60,60,.2)}.btn.ghost-dk:active,.btn.secondary-dk:active{background:rgba(0,0,0,.1);box-shadow:0 0 0 #3c3c3c}.btn.primary-dk{font-weight:500;color:#08b;background:#fff;border:1px solid #fff}.btn.primary-dk:focus,.btn.primary-dk:hover{color:#08b;background:hsla(0,0%,100%,.9);box-shadow:0 1px 5px rgba(60,60,60,.2)}.btn.primary-dk:active{background:hsla(0,0%,100%,.7)}.btn.brick-red{color:#fff;background:#cf3b5b;border:2px solid #cf3b5b}.btn.brick-red.ghost{background:transparent}.btn.brick-red.ghost:hover{border:2px solid #cf3b5b}.btn.gradient{color:#fff;background:radial-gradient(#bb6bd9 30%,#d6627e 50%,#e7deb2 80%,#66d59b 90%,#47b9e8 95%);background-size:600% 600%;background-position:70% 81%;border-radius:4px;position:relative;text-shadow:0 1px 4px rgba(0,0,0,.3)}.btn.gradient.ghost:after{position:absolute;top:1px;left:1px;border-radius:3px;width:calc(100% - 2px);height:calc(100% - 2px);content:"";background-color:#083555}.btn.gradient.ghost span{position:relative;z-index:1}.btn.picton-blue{font-weight:500;color:#fff;background:#47b9e8;border:1px solid #47b9e8}.btn.picton-blue:focus,.btn.picton-blue:hover{opacity:.9;box-shadow:0 1px 5px rgba(60,60,60,.2)}.btn.picton-blue:active{background:#08b;border:1px solid #08b}.btn.blaze-orange{font-weight:500;color:#fff;background:#ff6900;border:1px solid #ff6900}.btn.blaze-orange:focus,.btn.blaze-orange:hover{opacity:.9;box-shadow:0 1px 5px rgba(60,60,60,.2);background:#ff6900;border:1px solid #ff6900}.btn.blaze-orange:active{background:#ff6900;border:1px solid #ff6900}.btn.xlg{font-size:1rem;font-weight:700;padding:.625em 1.125em}.btn.lg,.btn.xlg{margin:6px;border-radius:4px}.btn.lg{font-size:.875rem;padding:10px 20px}.btn.mdm{font-size:.75rem;padding:8px 14px;margin:4px;border-radius:3px}.btn.sm{font-size:.625rem;padding:4px 8px;margin:2px;border-radius:2px}.btn:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.btn:active{-webkit-transform:translateY(0);transform:translateY(0)}.btn:focus{outline:0}.btn.left-aligned{margin-left:0}.subhead-text{max-width:1200px;margin:50px auto}.subhead-text:after{clear:both;content:"";display:table}.subhead-text h1,.subhead-text h2,.subhead-text h3,.subhead-text h4,.subhead-text p{text-align:center}.subhead-text.text-left h1,.subhead-text.text-left h2,.subhead-text.text-left h3,.subhead-text.text-left h4,.subhead-text.text-left p{text-align:left}.subhead-text.text-left p{margin:0}.subhead-text.careervid{margin-bottom:0}.subhead-text.career-video{margin-top:0}.subhead-text.text-left-news h1,.subhead-text.text-left-news h2,.subhead-text.text-left-news h3,.subhead-text.text-left-news h4,.subhead-text.text-left-news p{text-align:left;margin-bottom:-20px}.subhead-text.text-left-news p{margin:0}.subhead-text .slack-button{text-align:center;padding-top:40px}.subhead-text .slack-button .btn{display:inline}.subhead-text h1{color:#333;font-size:44px;font-weight:500}.subhead-text h2{color:#333;font-size:36px;font-weight:700}.subhead-text h3{color:#333;font-size:28px;font-weight:500}.subhead-text h4{color:#707070;font-size:22px;font-weight:400;line-height:1.6em}.subhead-text p{color:#707070;font-weight:300;font-size:18px;max-width:900px;width:64%;margin-left:18%;margin-right:18%;line-height:1.6em}.flex-table{max-width:1200px;display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;align-content:flex-start}.flex-table:after{clear:both;content:"";display:table}@media (max-width:860px){.flex-table{margin-left:2%;margin-right:2%}}.flex-table:last-child{margin-bottom:24px}.flex-table h4{margin-bottom:-40px;color:#404040;font-size:18px}.flex-table h4 span.trycloud-org-title{display:inline-block;font-weight:600;color:#ff6900;font-size:18px}.flex-table h4 span.trycloud-gray-title{display:inline-block;font-weight:600;color:#707070;font-size:18px}.flex-table h4 span.cloudpricing-blue-title,.flex-table h4 span.trycloud-blue-title{display:inline-block;font-weight:600;color:#08b;font-size:18px}.flex-table h4 span.cloudpricing-blue-title{line-height:1em}.flex-table.no-line{padding:10px 0 5px 20px}.flex-table.no-line .column{border-bottom:none;margin:auto}.flex-table.grey-cloud{background-color:#f9f9f9;line-height:25px;padding:10px 0 5px 20px;border-radius:4px}.flex-table.grey-cloud .column{border-bottom:none}.flex-table.white-cloud{background-color:#fff;line-height:25px;padding:6px 0 0 20px}.flex-table.white-cloud .column{border-bottom:none}.flex-table.grey-cloud-single{background-color:#f9f9f9;padding:10px 70px 5px 20px;line-height:25px;border-radius:4px}.flex-table.grey-cloud-single .column{border-bottom:none;flex-grow:200}.flex-table.white-cloud-single{background-color:#fff;line-height:25px;padding:6px 70px 0 20px}.flex-table.white-cloud-single .column{border-bottom:none;flex-grow:200}.flex-table.last-row .column{margin-bottom:40px}.flex-table .column{flex-basis:200px;flex-grow:1;font-size:16px;border-bottom:1px solid #ebebeb;padding-bottom:8px;color:#707070;margin-right:0;text-align:center}.flex-table .column a.btn-cloud-org-flex{color:#fff;font-size:13px;font-weight:500;padding:8px 30px;background-color:#08b;border-radius:4px;border:0;margin:10px}.flex-table .column a.btn-cloud-org-flex:hover{opacity:.8}@media (max-width:860px){.flex-table .column a.btn-cloud-org-flex{padding:8px 10px}}.flex-table .column span.support-section{display:inline-block;margin-top:20px;margin-bottom:0;font-weight:700;color:#828282;font-size:12px}.flex-table .column span.support-subtext{display:inline-block;margin-top:20px;margin-bottom:0;font-weight:400;color:#828282;font-size:12px}.flex-table .column span.support-greytext{font-size:14px;line-height:1.2em}.flex-table .column a.btn-cloud-blue-flex{color:#fff;font-size:13px;font-weight:500;padding:8px 30px;background-color:#ff6900;border-radius:4px;border:0;margin:10px}.flex-table .column a.btn-cloud-blue-flex:hover{opacity:.8}.flex-table .column a.btn-cloud-white-flex{color:#828282;border:1px solid #828282}.flex-table .column .btn-cloudpricing-blue-flex{color:#fff;font-size:12px;font-weight:500;padding:4px 8px;background-color:#828282;border-radius:4px;border:0;margin:10px}.flex-table .column a.btn-cloud-white-flex{color:#4f4f4f;font-size:13px;font-weight:500;padding:8px 30px;background-color:#fff;border-radius:4px;border:1px solid #ddd;margin:10px}.flex-table .column a.btn-cloud-white-flex:hover{opacity:.8}.flex-table .column:first-child{flex-basis:280px;flex-grow:2;text-align:left}.flex-table .column:first-child span.partner-section{display:inline-block;margin-top:20px;margin-bottom:0;font-weight:600;text-transform:uppercase;color:#404040;font-size:16px}.flex-table .column:first-child span.trycloud-section{display:inline-block;margin-top:20px;margin-bottom:0;font-weight:700;color:#828282;font-size:12px}.flex-table .column.cloudindent{flex-grow:200;padding-right:70px}.flex-table .column.button-align{margin:auto}.flex-table .column.flex-textleft{text-align:left;margin-left:30px}.cloudpricing-table{max-width:900px;margin:60px auto 20px}.cloudpricing-table .flex-table .column{text-align:left}.cloudpricing-table .flex-table .column.g{color:#4f4f4f}.cloudpricing-table .flex-table .column.center{text-align:center;font-size:14px;color:#4f4f4f;padding:0 16px 8px}.cloudpricing-table .flex-table .column.center .fa-plus-circle{color:#08b}.cloudpricing-table .flex-table .column.center .fa-minus-circle{color:#ff6900}.cloudpricing-table .cloudpricing-section{font-size:14px;font-weight:600;color:#828282}.cloudpricing-table .cloudpricing-section.sub{font-size:12px;font-weight:400}.cloudpricing-table .cloudpricing-section.memsql{color:#08b;font-size:22px}.cta-well{background:linear-gradient(98.81deg,#08b 33.63%,#55cdff 101.48%);color:#fff;font-family:Lato,sans-serif}.cta-well h1,.cta-well h2,.cta-well h3,.cta-well h4{text-align:left;color:#fff}@media (max-width:600px){.cta-well h1,.cta-well h2,.cta-well h3,.cta-well h4{text-align:center}}.cta-well .container-lg{display:flex;justify-content:space-between;align-items:center}@media (max-width:600px){.cta-well .container-lg{flex-direction:column}}.cta-well .content{flex:1 1 80%}@media (max-width:600px){.cta-well .content{margin-bottom:40px;text-align:center}}.cta-well .cta-wrapper{flex:1 0 20%}.cta-well .btn{background-color:#fff;color:#08b;border:0;border-radius:4px;font-family:Lato,sans-serif;font-size:14px;font-weight:700;box-shadow:0 1px 12px rgba(0,0,0,.25)}.well-blue{background:#08b;padding:15px 10% 40px}.well-blue.solutions{padding-bottom:0;margin-top:24px}.well-blue .columns-2{padding-bottom:0}.well-blue .columns-2 .column a.btn,.well-blue .columns-2 .column h3,.well-blue .columns-2 .column p{color:#fff;border-color:#fff}.well-blue .columns-2 .column .img-cutoff{overflow:hidden;height:290px}.well-blue .subhead-text{margin-top:0;margin-bottom:0;padding-top:48px}.well-blue .subhead-text h3{margin-top:0;color:#fff;font-weight:400}.well-blue .columns-3{margin-bottom:0}.well-blue .columns-3 .column{margin-bottom:48px;border-radius:3px}.well-blue .columns-3 .column img{height:30px;width:auto;margin-top:40px}.well-blue .columns-3 .column a,.well-blue .columns-3 .column p{color:#fff}.well-blue .columns-3 .column p.type{font-size:16px;margin-bottom:0;margin-top:40px;font-weight:600}.well-blue .columns-3 .column p.description{font-size:24px;margin-top:10px}@media (max-width:1042px) and (min-width:861px){.well-blue .columns-3 .column p.description{font-size:18px}}.well-blue .columns-3 .column a.btn{padding:8px 24px;margin-bottom:40px;font-size:14px;border:1px solid #fff}.well-blue .columns-3 .column a.btn:hover{opacity:1;background:hsla(0,0%,43.9%,.7);color:#fff}.well-blue .columns-3 .column.memsql{background:url(/images/featured-resources/sql-webcast-hp-bg.jpg);background-size:cover}.well{background:#f1f3f2;border:1px solid #d6d6d6}.narrow-well{z-index:10;background:#f1f3f2;border:0 solid #d6d6d6}.narrow-well .customer-logos-wrap{max-width:1200px;margin-left:auto;margin-right:auto}.narrow-well .customer-logos-wrap:after{clear:both;content:"";display:table}.narrow-well h2,.narrow-well h3,.narrow-well p{text-align:center}.narrow-well h2{font-weight:500;font-size:28px;color:#333}.narrow-well h3{font-weight:400;font-size:22px;color:#707070}.narrow-well h3.quote-attr{color:#000}.narrow-well a{font-weight:500;font-size:22px;color:#08b;text-align:center;text-decoration:none}.narrow-well a:focus,.narrow-well a:hover{color:#40a6ee;text-decoration:none}.narrow-well img{width:90%;max-width:1200px}.narrow-well-meetup{z-index:10;background:#f1f3f2;border:0 solid #d6d6d6}.narrow-well-meetup .customer-logos-wrap{max-width:1200px;margin-left:auto;margin-right:auto}.narrow-well-meetup .customer-logos-wrap:after{clear:both;content:"";display:table}.narrow-well-meetup h2,.narrow-well-meetup h3,.narrow-well-meetup p{text-align:left}.narrow-well-meetup h2{font-weight:500;font-size:28px;color:#333}.narrow-well-meetup h3{font-weight:400;font-size:22px;color:#707070}.narrow-well-meetup h3.quote-attr{color:#000}.narrow-well-meetup a{font-weight:500;font-size:22px;color:#08b;text-align:center;text-decoration:none}.narrow-well-meetup a:focus,.narrow-well-meetup a:hover{color:#40a6ee;text-decoration:none}.narrow-well.homepage-logo{padding:15px;text-align:center;background-color:#f1f3f2}.narrow-well-meetup.meetup-logo{padding:15px;text-align:left;background-color:#f1f3f2}.narrow-well-meetup.meetup-logo img{margin-right:20px;vertical-align:middle;display:inline-block}.narrow-well-meetup.meetup-logo a{font-size:16px}.narrow-well-meetup.meetup-logo p{display:inline-block;vertical-align:middle;max-width:70%}.narrow-well.homepage{padding:40px 20px 70px;text-align:center;background-color:#fff}.narrow-well.homepage h3{color:#404040;font-weight:400;font-size:28px;margin-bottom:0;line-height:.6em}.narrow-well.homepage a.btn-home-well{color:#404040;border:1px solid #404040;padding:8px 24px;margin-top:25px;margin-bottom:60px;font-size:15px;text-transform:uppercase;border-radius:25px;font-weight:500}.narrow-well.homepage a.btn-home-well:hover{background:hsla(0,0%,43.9%,.2)}.narrow-well.homepage p{color:#707070;font-weight:400;font-size:18px;margin-bottom:30px}.narrow-well.homepage p a{font-weight:600;font-size:18px;line-height:1.8em}@media (max-width:860px){.narrow-well.homepage h3{margin-top:0;line-height:1.2em}}.blue-gradient-band{background:linear-gradient(103.43deg,#08b 32.78%,#55cdff 99.99%);position:relative}.blue-gradient-band .columns-2{max-width:1100px}.blue-gradient-band .columns-2 .column h4{font-size:42px;line-height:130%;color:#fff;font-weight:300;margin-bottom:0;margin-top:40px}.blue-gradient-band .columns-2 .column p{font-size:18px;line-height:130%;color:#fff;font-weight:300;margin-bottom:40px}.blue-gradient-band .columns-2 .column .btn-wrap{margin-top:68px}.blue-gradient-band .columns-2 .column .btn-wrap a.btn{padding:13px 35px}.blue-gradient-band .columns-2 .column .btn-wrap a.btn.clear{border:1px solid #fff;box-sizing:border-box;border-radius:4px;opacity:.5;font-size:17px;line-height:100%;color:#fff;margin-right:20px}.blue-gradient-band .columns-2 .column .btn-wrap a.btn.clear:hover{opacity:1}@media (max-width:500px){.blue-gradient-band .columns-2 .column .btn-wrap a.btn.clear{padding:15px 10px}}.blue-gradient-band .columns-2 .column .btn-wrap a.btn.fill{background:#fff;opacity:1;box-shadow:0 1px 12px transparent;border-radius:4px;font-size:17px;line-height:100%;color:#08b;font-weight:500;border-width:0}.blue-gradient-band .columns-2 .column .btn-wrap a.btn.fill:hover{box-shadow:0 1px 12px rgba(0,0,0,.25)}@media (max-width:500px){.blue-gradient-band .columns-2 .column .btn-wrap a.btn.fill{padding:15px 10px}}.card-block{display:flex;border:1px solid #e6e6e6;border-radius:8px;background-color:#fff;margin:20px;padding:50px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;text-decoration:none;color:#828282}.card-block h1,.card-block h2,.card-block h3,.card-block h4{color:#4f4f4f;text-align:left;margin-top:0;margin-bottom:10px}.card-block p{font-size:1rem;margin-top:0}.card-block ul{font-size:1rem;padding-left:17px}.card-block:hover{box-shadow:0 1px 6px rgba(0,0,0,.12);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.card-block.is-vertical{flex-direction:column;padding:80px 50px 60px}.card-block.is-vertical h1,.card-block.is-vertical h2,.card-block.is-vertical h3,.card-block.is-vertical h4{text-align:center}.card-block.is-vertical .header-block{margin:0 0 50px;max-height:55px}.card-block.is-vertical .header-block img{width:unset;max-width:100%;max-height:100%}.card-block.is-vertical .content-block{display:flex;flex-direction:column}.card-block.is-vertical .hover-only{margin:auto 0 0}.card-block.is-link{cursor:pointer}@media (max-width:600px){.card-block.is-link h4{text-align:center}.card-block.is-link p{display:none}}.card-block.is-link:hover .hover-only{-webkit-transform:translateY(0);transform:translateY(0)}.card-block.is-steps{padding:25px 60px}@media (max-width:600px){.card-block.is-steps{padding:25px 40px}}.card-block.is-steps .header-block{margin-top:0}.card-block.is-steps .header-block .step-wrapper{display:flex;align-items:center;margin-top:-4px}.card-block.is-steps .header-block .step{font-size:.9375em;font-weight:700;margin-right:12px}.card-block.is-steps .header-block .number{font-size:2.8125em;font-weight:700}@media (max-width:600px){.card-block.is-steps .header-block{display:block;margin-right:20px}}@media (max-width:600px){.card-block.is-steps .content-block{display:flex;align-items:center}.card-block.is-steps .content-block h4{text-align:unset}.card-block.is-steps .content-block p{display:none}}.card-block.is-steps p{margin-bottom:10px}@media (max-width:600px){.card-block.is-steps p{display:none}}.card-block.is-diagram{flex-direction:column;align-items:center;padding:40px 20px;margin:8px;text-align:center}.card-block.is-diagram .step,.card-block.is-diagram p{font-size:.875rem;color:#828282}.card-block.is-diagram .step{font-weight:700;text-transform:uppercase}.card-block.is-diagram .image-block{display:flex;margin:20px 0 10px;height:92px}.card-block.is-diagram .image-block .image-wrapper{position:relative;margin:6px}.card-block.is-diagram .image-block .icon-wrapper{display:flex;justify-content:center;align-content:center;width:80px;height:80px;background:#f2f2f2;border-radius:50%}.card-block.is-diagram .image-block .icon-wrapper.blue{background:#47b9e8}.card-block.is-diagram .image-block .icon-wrapper img{align-self:center;width:50%}.card-block.is-diagram .image-block .tooltip-group{position:absolute;bottom:0;right:-5px}.card-block.is-diagram .card-header{font-size:1rem;font-weight:900;line-height:1.5em;color:#4f4f4f;margin:0;text-align:center}.card-block.is-diagram .card-subheader{font-weight:700;line-height:1.5em;margin:0}.card-block.is-job-listing{justify-content:space-between;padding:33px 37px}@media (max-width:600px){.card-block.is-job-listing{flex-direction:column}}.card-block.is-job-listing.no-job{border:none;background-color:#f2f2f2;justify-content:center}.card-block.is-job-listing.no-job:hover{box-shadow:none;-webkit-transform:none;transform:none}.card-block.is-job-listing .fa-globe-americas{margin-right:.5em}.card-block.is-job-listing .header-block{flex:1 0 72%;margin:0 40px 0 0}.card-block.is-job-listing .header-block h4{margin-bottom:0}@media (max-width:600px){.card-block.is-job-listing .header-block h4{margin-bottom:10px}}@media (max-width:925px){.card-block.is-job-listing .header-block{flex:auto}}@media (max-width:600px){.card-block.is-job-listing .header-block{display:block}}.card-block.is-job-listing .content-block{flex:1 1 28%;display:flex;align-items:center}@media (max-width:925px){.card-block.is-job-listing .content-block{flex:none}}.card-block .header-block{flex:1 0 9%;margin-right:50px;margin-top:12px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;color:#4f4f4f}@media (max-width:600px){.card-block .header-block{display:none}}.card-block .header-block img{width:100%}.card-block .content-block{flex:1 1 86%;overflow:hidden;position:relative}.card-block .content-block i.fa{margin-right:5px}.card-block .hover-only{color:#08b;font-size:1rem;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;-webkit-transform:translateY(2.2em);transform:translateY(2.2em)}@media (max-width:600px){.card-block .hover-only{display:none}}.card-accordion{font-family:Lato,sans-serif;text-align:left;margin:15px;border:1px solid #e6e6e6;border-radius:6px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;color:#4f4f4f}@media (max-width:600px){.card-accordion{border-radius:4px}}.card-accordion p{font-size:1rem;line-height:1.5em;margin:0 0 20px}.card-accordion ul{font-size:1rem}.card-accordion .btn{margin-left:0}.card-accordion.is-open .card-accordion-content{max-height:40em;opacity:1}.card-accordion.is-open .card-accordion-icon:before{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.card-accordion.is-open .card-accordion-icon:after{-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}.card-accordion.is-dark{border:none;background:hsla(0,0%,100%,.05);color:#fff}.card-accordion.is-dark .card-accordion-icon:after,.card-accordion.is-dark .card-accordion-icon:before{background-color:#47b9e8}.card-accordion .card-accordion-title{position:relative;display:block;font-size:18px;font-weight:700;line-height:1.5em;padding:25px 62px 25px 25px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:600px){.card-accordion .card-accordion-title{padding:20px}}.card-accordion .card-accordion-icon{position:absolute;top:50%;right:25px;width:12px;height:12px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.card-accordion .card-accordion-icon:after,.card-accordion .card-accordion-icon:before{position:absolute;background-color:#828282;border-radius:100px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;content:""}.card-accordion .card-accordion-icon:before{top:33.3%;left:0;width:100%;height:3px}.card-accordion .card-accordion-icon:after{top:33.3%;left:0;width:100%;height:3px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:1}.card-accordion .card-accordion-content{max-height:0;overflow:hidden;-webkit-transition:.3s;transition:.3s;opacity:0}.card-accordion .card-accordion-content .card-accordion-content-inner{padding:0 25px 25px}@media (max-width:600px){.card-accordion .card-accordion-content .card-accordion-content-inner{padding:0 20px 20px}}.card-accordion:hover{box-shadow:0 1px 6px rgba(0,0,0,.12);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.image-body-block{display:flex;justify-content:space-between;margin-bottom:40px}@media (max-width:600px){.image-body-block{flex-direction:column;align-items:flex-start}}.image-body-block .image{margin-right:40px;text-align:center;flex:1 0 15%}@media (max-width:600px){.image-body-block .image{display:none}}.image-body-block .image img{width:100%}.image-body-block .body{font-family:Lato,sans-serif;line-height:1.5em}.image-body-block .body h4{font-size:1.5rem;margin-top:0;margin-bottom:10px;color:#4f4f4f;font-weight:700}.image-body-block .body p{color:#828282;font-size:1.125rem}.tooltip-group{position:relative;z-index:200}.tooltip-group,.tooltip-group .tooltip{display:flex;flex-direction:column;align-items:center}.tooltip-group .tooltip{width:350px;-webkit-transform:translateY(20px);transform:translateY(20px);opacity:0;-webkit-transition:.3s ease-in-out;transition:.3s ease-in-out;position:absolute;bottom:40px;pointer-events:none}.tooltip-group .bubble{padding:10px 16px 16px;background:#333;color:#fff;border-radius:4px;text-align:left}.tooltip-group .bubble .title{font-size:1.125em;font-weight:900;line-height:1.5em}.tooltip-group .bubble .content{font-size:.875em;line-height:1.5em}.tooltip-group .line{position:unset;border-radius:unset;width:4px;height:105px;background:#333}.tooltip-group .dot{border:2px solid #fff;width:24px;height:24px;border-radius:50%;background:#5bc759;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;z-index:100;color:#fff;position:relative;display:flex;justify-content:center;align-items:center}.tooltip-group .dot .check{width:60%}.tooltip-group .dot:after{border:2px solid #5bc759;content:"";width:200%;height:200%;display:block;position:absolute;left:-10px;top:-10px;border-radius:50%;opacity:0}.tooltip-group .dot.pulse:after{-webkit-animation:pulse 1.3s linear infinite;animation:pulse 1.3s linear infinite}.tooltip-group .dot.bad{background:#d5322f}.tooltip-group .dot.bad .exclamation{width:22%}.tooltip-group .dot.bad:after{border-color:#d5322f}.tooltip-group .scale{-webkit-transform:scale(1.5);transform:scale(1.5)}.tooltip-group .show{opacity:1;-webkit-transform:translateY(15px);transform:translateY(15px)}@-webkit-keyframes pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}@keyframes pulse{0%{-webkit-transform:scale(.5);transform:scale(.5);opacity:1}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.tooltip-item{background:#fff;border:0 solid #dcdcdc;display:inline-block;padding:.5em 1em;position:relative;text-align:center}.tooltip-item:focus,.tooltip-item:hover .tooltip{opacity:1;visibility:visible}.tooltip-item .tooltip{position:absolute;right:0;bottom:3em;left:0;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;background-color:#fff;background:#fff;border-radius:3px;box-shadow:0 2px 2px silver;color:#333;font-size:.9em;line-height:1.5em;margin:0 auto;max-width:16em;opacity:0;padding:1em;text-align:center;visibility:hidden;z-index:10}.tooltip-item .tooltip p{color:#333;line-height:1.5em;margin:0}.tooltip-item .tooltip:after{position:absolute;right:0;left:0;border:8px solid transparent;bottom:-1.3em;color:#fff;content:"\25BC";font-size:1.4em;margin-left:-8px;text-align:center;text-shadow:0 2px 2px silver}.tooltip-item{padding:unset}.tooltip-item.narrow .tooltip{bottom:7em;right:-64px;left:unset;width:320px}.tooltip-item.narrow.ugh .tooltip{right:-56px}.tooltip-item .tooltip{bottom:4.5em;text-align:left;background:rgba(79,79,79,.8);box-shadow:0 1px 6px rgba(0,0,0,.12);border-radius:4px}.tooltip-item .tooltip:after{bottom:-19px;font-size:1.5em;content:"\25BE";color:rgba(79,79,79,.8)}.tooltip-item .tooltip p{font-size:16px;line-height:100%;margin-bottom:5px;color:#fff}.form-wrapper{font-family:Lato,sans-serif;width:330px;margin:0 auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:600px){.form-wrapper{width:100%;max-width:330px}}.form-wrapper .form-error{color:#d5322f;text-align:center;margin-bottom:10px}.form-wrapper .form-row{display:flex;flex-direction:row;margin:1.5em 0}@media (max-width:600px){.form-wrapper .form-row{flex-direction:column}}.form-wrapper .form-row.floating{margin:1.125em 0}.form-wrapper .form-row:last-child{margin-bottom:0}.form-wrapper .form-row button[type=submit]{font-size:.9375em;font-weight:700;width:100%;padding:.875em;margin:.625em 0}.form-wrapper .form-row .form-group{position:relative;flex:1 1}.form-wrapper .form-row .form-group+.form-group{margin-left:10px}@media (max-width:600px){.form-wrapper .form-row .form-group+.form-group{margin-top:1.5em;margin-left:0}}.circle{height:4px;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;animation-duration:.4s;-webkit-animation-duration:.4s}.circle,.shape{width:4px;position:relative;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;border-radius:4px}.shape{animation-iteration-count:infinite;animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:1s}.lblue{background-color:#f1f4f9}.blue{background-color:#3b95a9}.mblue{background-color:#407397}.bblue{background-color:#55cdff}.dgrey{background-color:#343434}.mgrey{background-color:#707070}.lgrey,.white{background-color:#fff}#data-animation,#data-animation-2,#data-animation-3,#data-animation-4,#data-animation-5{animation-name:test;animation-duration:1s;-webkit-animation-name:test;-webkit-animation-duration:1s;height:264px;width:56px;margin:0 auto;position:absolute;top:-55px;left:0;right:0}#data-animation-4{left:unset;right:50px}#data-animation-3,#data-animation-5{right:unset;left:50px}@-webkit-keyframes test{0%{opacity:0}to{opacity:1}}@keyframes test{0%{opacity:0}to{opacity:1}}@-webkit-keyframes data1{0%{opacity:0;left:4px;top:42px}8%{opacity:1;left:4px;top:44px}to{opacity:0;left:4px;top:10px}}@-webkit-keyframes data2{0%{opacity:0;height:8px;left:12px;top:38px}8%{opacity:1;height:8px;left:12px;top:30px}to{opacity:0;height:8px;left:12px;top:0}}@-webkit-keyframes data3{0%{opacity:0;left:20px;top:18px}8%{opacity:1;left:20px;top:10px}to{opacity:0;left:20px;top:-10px}}@-webkit-keyframes data4{0%{opacity:0;left:28px;top:30px}8%{opacity:1;left:28px;top:20px}to{opacity:0;left:28px;top:-10px}}@-webkit-keyframes data5{0%{opacity:0;left:36px;top:38px}8%{opacity:1;left:36px;top:30px}to{opacity:0;left:36px;top:0}}@-webkit-keyframes data6{0%{opacity:0;left:44px;top:118px}8%{opacity:1;left:44px;top:110px}to{opacity:0;left:44px;top:0}}@-webkit-keyframes data7{0%{opacity:0;left:52px;top:128px}8%{opacity:1;left:52px;top:120px}to{opacity:0;left:52px;top:40px}}@-webkit-keyframes b1{0%{opacity:0;left:0;top:30px}8%{opacity:1;left:0;top:38px}to{opacity:0;left:0;top:80px}}@-webkit-keyframes b2{0%{opacity:0;left:8px;top:40px}8%{opacity:1;left:8px;top:48px}to{opacity:0;left:8px;top:90px}}@-webkit-keyframes b3{0%{opacity:0;left:16px;top:40px}8%{opacity:1;left:16px;top:48px}to{opacity:0;left:16px;top:90px}}@-webkit-keyframes b4{0%{opacity:0;left:24px;top:50px}8%{opacity:1;left:24px;top:58px}to{opacity:0;left:24px;top:100px}}@-webkit-keyframes b5{0%{opacity:0;left:32px;top:0}8%{opacity:1;left:32px;top:18px}to{opacity:0;left:32px;top:70px}}@-webkit-keyframes b6{0%{opacity:0;height:4px;left:40px;top:20px}8%{opacity:1;height:4px;left:40px;top:28px}to{opacity:0;height:4px;left:40px;top:60px}}@-webkit-keyframes s1{0%{top:0}50%{top:4px}to{top:0}}@-webkit-keyframes s2{0%{top:-44px}50%{top:-40px}to{top:-44px}}@-webkit-keyframes s3{0%{top:-54px}50%{top:-58px}to{top:-54px}}@-webkit-keyframes s4{0%{top:-120px}50%{top:-124px}to{top:-120px}}@-webkit-keyframes s5{0%{top:-144px}50%{top:-140px}to{top:-144px}}@-webkit-keyframes s6{0%{top:-210px}50%{top:-216px}to{top:-210px}}@-webkit-keyframes s7{0%{top:-234px}50%{top:-230px}to{top:-234px}}@-webkit-keyframes s8{0%{top:-300px}50%{top:-304px}to{top:-300px}}@-webkit-keyframes s9{0%{top:-324px}50%{top:-320px}to{top:-324px}}@-webkit-keyframes s10{0%{top:-364px}50%{top:-368px}to{top:-364px}}@-webkit-keyframes s11{0%{top:-378px}50%{top:-374px}to{top:-378px}}@keyframes data1{0%{opacity:0;left:4px;top:42px}8%{opacity:1;left:4px;top:44px}to{opacity:0;left:4px;top:10px}}@keyframes data2{0%{opacity:0;height:8px;left:12px;top:38px}8%{opacity:1;height:8px;left:12px;top:30px}to{opacity:0;height:8px;left:12px;top:0}}@keyframes data3{0%{opacity:0;left:20px;top:18px}8%{opacity:1;left:20px;top:10px}to{opacity:0;left:20px;top:-10px}}@keyframes data4{0%{opacity:0;left:28px;top:30px}8%{opacity:1;left:28px;top:20px}to{opacity:0;left:28px;top:-10px}}@keyframes data5{0%{opacity:0;left:36px;top:38px}8%{opacity:1;left:36px;top:30px}to{opacity:0;left:36px;top:0}}@keyframes data6{0%{opacity:0;left:44px;top:118px}8%{opacity:1;left:44px;top:110px}to{opacity:0;left:44px;top:0}}@keyframes data7{0%{opacity:0;left:52px;top:128px}8%{opacity:1;left:52px;top:120px}to{opacity:0;left:52px;top:40px}}@keyframes b1{0%{opacity:0;left:0;top:30px}8%{opacity:1;left:0;top:38px}to{opacity:0;left:0;top:80px}}@keyframes b2{0%{opacity:0;left:8px;top:40px}8%{opacity:1;left:8px;top:48px}to{opacity:0;left:8px;top:90px}}@keyframes b3{0%{opacity:0;left:16px;top:40px}8%{opacity:1;left:16px;top:48px}to{opacity:0;left:16px;top:90px}}@keyframes b4{0%{opacity:0;left:24px;top:50px}8%{opacity:1;left:24px;top:58px}to{opacity:0;left:24px;top:100px}}@keyframes b5{0%{opacity:0;left:32px;top:0}8%{opacity:1;left:32px;top:18px}to{opacity:0;left:32px;top:70px}}@keyframes b6{0%{opacity:0;height:4px;left:40px;top:20px}8%{opacity:1;height:4px;left:40px;top:28px}to{opacity:0;height:4px;left:40px;top:60px}}@keyframes s1{0%{top:0}50%{top:4px}to{top:0}}@keyframes s2{0%{top:-44px}50%{top:-40px}to{top:-44px}}@keyframes s3{0%{top:-54px}50%{top:-58px}to{top:-54px}}@keyframes s4{0%{top:-120px}50%{top:-124px}to{top:-120px}}@keyframes s5{0%{top:-144px}50%{top:-140px}to{top:-144px}}@keyframes s6{0%{top:-210px}50%{top:-216px}to{top:-210px}}@keyframes s7{0%{top:-234px}50%{top:-230px}to{top:-234px}}@keyframes s8{0%{top:-300px}50%{top:-304px}to{top:-300px}}@keyframes s9{0%{top:-324px}50%{top:-320px}to{top:-324px}}@keyframes s10{0%{top:-364px}50%{top:-368px}to{top:-364px}}@keyframes s11{0%{top:-378px}50%{top:-374px}to{top:-378px}}.a1{animation-name:data1;animation-delay:-.1s;-webkit-animation-name:data1;-webkit-animation-delay:-.1s}.a2{animation-name:data2;animation-delay:-.2s;-webkit-animation-name:data2;-webkit-animation-delay:-.2s}.a3{animation-name:data3;animation-delay:-.3s;-webkit-animation-name:data3;-webkit-animation-delay:-.3s}.a4{animation-name:data4;animation-delay:-.4s;-webkit-animation-name:data4;-webkit-animation-delay:-.4s}.a5{animation-name:data5;animation-delay:-.5s;-webkit-animation-name:data5;-webkit-animation-delay:-.5s}.b1{animation-name:b1;animation-delay:-.1s;-webkit-animation-name:b1;-webkit-animation-delay:-.1s}.b2{animation-name:b2;animation-delay:-.2s;-webkit-animation-name:b2;-webkit-animation-delay:-.2s}.b3{animation-name:b3;animation-delay:-.3s;-webkit-animation-name:b3;-webkit-animation-delay:-.3s}.b4{animation-name:b4;animation-delay:-.4s;-webkit-animation-name:b4;-webkit-animation-delay:-.4s}.b5{animation-name:b5;animation-delay:-.5s;-webkit-animation-name:b5;-webkit-animation-delay:-.5s}.b6{animation-name:b6;animation-delay:-.6s;-webkit-animation-name:b6;-webkit-animation-delay:-.6s}.b7{animation-name:b7;animation-delay:-.7s;-webkit-animation-name:b7;-webkit-animation-delay:-.7s}.shape1{animation-name:s1;animation-delay:0s;-webkit-animation-name:s1;-webkit-animation-delay:0s;height:28px;left:0}.shape2{animation-name:s2;-webkit-animation-name:s2;border-radius:4px;height:32px;left:4px}.shape2,.shape3{animation-delay:-.1s;-webkit-animation-delay:-.1s}.shape3{animation-name:s3;-webkit-animation-name:s3;height:42px;left:8px;top:12px}.shape4{animation-name:s4;-webkit-animation-name:s4;height:42px;left:12px}.shape4,.shape5{animation-delay:-.2s;-webkit-animation-delay:-.2s}.shape5{animation-name:s5;-webkit-animation-name:s5;height:38px;left:16px}.shape6{animation-name:s6;-webkit-animation-name:s6;height:52px;left:20px}.shape6,.shape7{animation-delay:-.3s;-webkit-animation-delay:-.3s}.shape7{animation-name:s7;-webkit-animation-name:s7;height:46px;left:24px}.shape8{animation-name:s8;-webkit-animation-name:s8;height:45px;left:28px}.shape8,.shape9{animation-delay:-.4s;-webkit-animation-delay:-.4s}.shape9{animation-name:s9;-webkit-animation-name:s9;height:32px;left:32px}.shape10{animation-name:s10;-webkit-animation-name:s10;height:22px;left:36px}.shape10,.shape11{animation-delay:-.5s;-webkit-animation-delay:-.5s}.shape11{animation-name:s11;-webkit-animation-name:s11;height:24px;left:40px}.product-animation .mantis{background-color:rgba(91,199,89,.7)}.product-animation .picton{background-color:rgba(71,185,232,.6)}.product-animation .supernova{background-color:rgba(255,206,12,.5)}.product-animation .pictonbluegrad{background:-webkit-gradient(linear,right top,left top,color-stop(64.75%,#47b9e8),color-stop(104.45%,rgba(71,185,232,0)));background:linear-gradient(270deg,#47b9e8 64.75%,rgba(71,185,232,0) 104.45%)}.product-animation .curiousblue{background-color:#14a0d4}.product-animation .concrete{background-color:#f2f2f2}.product-animation .bg_image_illustration{max-width:900px;width:96%;height:334px;background:url(/images/product/image_memsql_illustration_bg.gif);background-repeat:no-repeat;background-size:900px 334px;position:absolute}.product-animation .bg_image_pipe{width:900px;height:505px;background:url(/images/product/image_screenshot_pipelines_background.gif);background-repeat:no-repeat;background-size:900px 505px;position:absolute}.product-animation .illustration{position:relative;max-width:900px;width:96%;height:334px;margin:auto}@media (max-width:950px){.product-animation .illustration{display:none}}.product-animation .static-product-diagram{width:94%;margin:auto;display:none}@media (max-width:950px){.product-animation .static-product-diagram{display:block;margin-bottom:24px}}.product-animation .pipelines-animation{max-width:900px;width:96%;height:505px;position:relative;animation-name:transition;-webkit-animation-name:transition;margin:auto}@media (max-width:950px){.product-animation .pipelines-animation{display:none}}.product-animation .chart1{position:absolute;top:0}.product-animation .chart2{position:absolute;top:38px}.product-animation .chart3{position:absolute;top:138px}.product-animation .chart4{position:absolute;top:228px}.product-animation .ingest2{position:absolute;top:42px;left:61px}@media (max-width:950px){.product-animation .ingest2{display:none}}.product-animation .live{position:absolute;top:42px;left:389px}@media (max-width:950px){.product-animation .live{display:none}}.product-animation .historical{position:absolute;top:42px;left:534px}@media (max-width:950px){.product-animation .historical{display:none}}.product-animation .dot{width:11px;height:11px;background:rgba(71,185,232,.2);position:absolute;border-radius:20px}.product-animation .dot1{top:183px;left:670px;animation:dot1 1.2s linear infinite;-webkit-animation:dot1 1.2s linear infinite}.product-animation .dot2{top:203px;left:670px;animation:dot2 1.2s linear infinite;-webkit-animation:dot2 1.2s linear infinite}.product-animation .dot3{top:183px;left:670px;animation:dot1 1.2s linear -.6s infinite;-webkit-animation:dot1 1.2s linear -.6s infinite}.product-animation .dot4{top:203px;left:670px;animation:dot2 1.2s linear -.6s infinite;-webkit-animation:dot2 1.2s linear -.6s infinite}.product-animation .dot5{top:183px;left:670px;animation:dot1 1s linear -.5s infinite;-webkit-animation:dot1 1s linear -.5s infinite}.product-animation .dot6{top:203px;left:670px;animation:dot2 1s linear -.5s infinite;-webkit-animation:dot2 1s linear -.5s infinite}@keyframes dot1{0%{opacity:0}33%{opacity:1;-webkit-transform:translate(66px,33px);transform:translate(66px,33px)}75%{opacity:0;-webkit-transform:translate(160px,-40px);transform:translate(160px,-40px)}to{opacity:0}}@-webkit-keyframes dot1{0%{opacity:0}33%{opacity:1;-webkit-transform:translate(66px,33px);transform:translate(66px,33px)}75%{opacity:0;-webkit-transform:translate(160px,-40px);transform:translate(160px,-40px)}to{opacity:0}}@keyframes dot2{0%{opacity:0}33%{opacity:1;-webkit-transform:translate(54px,-43px);transform:translate(54px,-43px)}75%{opacity:1;-webkit-transform:translate(120px,12px);transform:translate(120px,12px)}90%{opacity:0;-webkit-transform:translate(190px);transform:translate(190px)}to{opacity:0}}@-webkit-keyframes dot2{0%{opacity:0}33%{opacity:1;-webkit-transform:translate(54px,-43px);transform:translate(54px,-43px)}75%{opacity:1;-webkit-transform:translate(120px,12px);transform:translate(120px,12px)}90%{opacity:0;-webkit-transform:translate(190px);transform:translate(190px)}to{opacity:0}}.product-animation .line{height:9px;position:absolute;border-radius:2px;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.product-animation .pcircle{height:9px;width:9px;position:absolute;border-radius:4px;animation-iteration-count:infinite;animation-duration:.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:.5s}.product-animation .bar{height:12px;width:4px;position:absolute;animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:4s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-webkit-animation-duration:4s}.product-animation .row-animation{width:118px}.product-animation .animation-column,.product-animation .row-animation{position:absolute;border-radius:2px;animation-iteration-count:infinite;animation-duration:3s;-webkit-animation-iteration-count:infinite;-webkit-animation-duration:3s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.product-animation .animation-column{width:27px}.product-animation .l1{animation-name:z1;animation-delay:0s;-webkit-animation-name:z1;-webkit-animation-delay:0s;top:101px}.product-animation .l2{animation-name:z2;animation-delay:-.2s;-webkit-animation-name:z2;-webkit-animation-delay:-.2s;top:121px}.product-animation .l3{animation-name:z3;animation-delay:-.1s;-webkit-animation-name:z3;-webkit-animation-delay:-.1s;top:140px}.product-animation .l4{animation-name:z2;animation-delay:-.3s;-webkit-animation-name:z2;-webkit-animation-delay:-.3s;top:157px}.product-animation .l5{animation-name:z3;animation-delay:-.2s;-webkit-animation-name:z3;-webkit-animation-delay:-.2s;top:177px}.product-animation .l6{animation-name:z3;animation-delay:-.4s;-webkit-animation-name:z3;-webkit-animation-delay:-.4s;top:197px}.product-animation .z1{animation-name:i1;-webkit-animation-name:i1;animation-delay:0s;-webkit-animation-delay:0s;top:101px}.product-animation .z2{animation-name:i1;animation-delay:-.2s;-webkit-animation-name:i1;-webkit-animation-delay:-.2s;top:121px}.product-animation .z3{animation-name:i1;animation-delay:-.1s;-webkit-animation-name:i1;-webkit-animation-delay:-.1s;top:140px}.product-animation .z4{animation-name:i1;animation-delay:-.3s;-webkit-animation-name:i1;-webkit-animation-delay:-.3s;top:157px}.product-animation .z5{animation-name:i1;animation-delay:-.2s;-webkit-animation-name:i1;-webkit-animation-delay:-.2s;top:177px}.product-animation .z6{animation-name:i1;animation-delay:-.4s;-webkit-animation-name:i1;-webkit-animation-delay:-.4s;top:197px}.product-animation .r1{animation-name:z7;animation-delay:0s;-webkit-animation-name:z7;-webkit-animation-delay:0s}.product-animation .r2{animation-name:z8;animation-delay:-.3s;-webkit-animation-name:z8;-webkit-animation-delay:-.3s}.product-animation .r3{animation-name:z9;animation-delay:-.1s;-webkit-animation-name:z9;-webkit-animation-delay:-.1s}.product-animation .r4{animation-name:z10;animation-delay:-.4s;-webkit-animation-name:z10;-webkit-animation-delay:-.4s;left:0}.product-animation .r5{animation-name:z10;animation-delay:-.2s;-webkit-animation-name:z10;-webkit-animation-delay:-.2s;left:46px}.product-animation .r6{animation-name:z10;animation-delay:-.5s;-webkit-animation-name:z10;-webkit-animation-delay:-.5s;left:90px}.product-animation .y1{animation-name:y1;animation-delay:-4s;-webkit-animation-name:y1;-webkit-animation-delay:-4s;left:299px;top:212px}.product-animation .y2{animation-name:y1;animation-delay:-3.8s;-webkit-animation-name:y1;-webkit-animation-delay:-3.8s;left:287px}.product-animation .y3{animation-name:y1;animation-delay:-3.6s;-webkit-animation-name:y1;-webkit-animation-delay:-3.6s;left:275px}.product-animation .y4{animation-name:y1;animation-delay:-3.4s;-webkit-animation-name:y1;-webkit-animation-delay:-3.4s;left:263px}.product-animation .y5{animation-name:y1;animation-delay:-3.2s;-webkit-animation-name:y1;-webkit-animation-delay:-3.2s;left:251px}.product-animation .y6{animation-name:y1;animation-delay:-3s;-webkit-animation-name:y1;-webkit-animation-delay:-3s;left:239px}.product-animation .y7{animation-name:y1;animation-delay:-2.8;-webkit-animation-name:y1;-webkit-animation-delay:-2.8;left:227px}.product-animation .y8{animation-name:y1;animation-delay:-2.6s;-webkit-animation-name:y1;-webkit-animation-delay:-2.6s;left:215px}.product-animation .y9{animation-name:y1;animation-delay:-2.4s;-webkit-animation-name:y1;-webkit-animation-delay:-2.4s;left:203px}.product-animation .y10{animation-name:y1;animation-delay:-2.2s;-webkit-animation-name:y1;-webkit-animation-delay:-2.2s;left:191px}.product-animation .y11{animation-name:y1;animation-delay:-2s;-webkit-animation-name:y1;-webkit-animation-delay:-2s;left:178px}.product-animation .y12{animation-name:y1;animation-delay:-1.8s;-webkit-animation-name:y1;-webkit-animation-delay:-1.8s;left:167px}.product-animation .y13{animation-name:y1;animation-delay:-1.6s;-webkit-animation-name:y1;-webkit-animation-delay:-1.6s;left:155px}.product-animation .y17{animation-name:y1;animation-delay:-3s;-webkit-animation-name:y1;-webkit-animation-delay:-3s;left:300px;top:212px}.product-animation .y18{animation-name:y1;animation-delay:-2.8s;-webkit-animation-name:y1;-webkit-animation-delay:-2.8s;left:290px}.product-animation .y19{animation-name:y1;animation-delay:-2.6s;-webkit-animation-name:y1;-webkit-animation-delay:-2.6s;left:280px}.product-animation .y20{animation-name:y1;animation-delay:-2.4s;-webkit-animation-name:y1;-webkit-animation-delay:-2.4s;left:270px}.product-animation .y21{animation-name:y1;animation-delay:-2.2s;-webkit-animation-name:y1;-webkit-animation-delay:-2.2s;left:260px}.product-animation .y22{animation-name:y1;animation-delay:-2s;-webkit-animation-name:y1;-webkit-animation-delay:-2s;left:250px}.product-animation .y23{animation-name:y1;animation-delay:-1.8;-webkit-animation-name:y1;-webkit-animation-delay:-1.8;left:240px;top:212px}.product-animation .y24{animation-name:y1;animation-delay:-1.6s;-webkit-animation-name:y1;-webkit-animation-delay:-1.6s;left:230px}.product-animation .y25{animation-name:y1;animation-delay:-1.4s;-webkit-animation-name:y1;-webkit-animation-delay:-1.4s;left:220px}.product-animation .y26{animation-name:y1;animation-delay:-1.2s;-webkit-animation-name:y1;-webkit-animation-delay:-1.2s;left:210px}.product-animation .y27{animation-name:y1;animation-delay:-1s;-webkit-animation-name:y1;-webkit-animation-delay:-1s;left:200px}.product-animation .y28{animation-name:y1;animation-delay:-.8s;-webkit-animation-name:y1;-webkit-animation-delay:-.8s;left:190px}.product-animation .y29{animation-name:y1;animation-delay:-.6s;-webkit-animation-name:y1;-webkit-animation-delay:-.6s;left:180px}.product-animation .y30{animation-name:y1;animation-delay:-.4s;-webkit-animation-name:y1;-webkit-animation-delay:-.4s;left:170px}.product-animation .y31{animation-name:y1;animation-delay:-.2s;-webkit-animation-name:y1;-webkit-animation-delay:-.2s;left:160px}.product-animation .y32{animation-name:y1;animation-delay:0s;-webkit-animation-name:y1;-webkit-animation-delay:0s;left:150px}@keyframes y1{0%{opacity:0;height:0;top:224px}11%{opacity:1;height:12px;top:212px}22%{opacity:1;height:12px;top:212px}33%{opacity:0;height:0;top:224px}44%{opacity:0;height:0;top:224px}55%{opacity:0;height:0;top:224px}66%{opacity:0;height:0;top:224px}77%{opacity:1;height:12px;top:212px}88%{opacity:1;height:12px;top:212px}to{opacity:0;height:0;top:224px}}@-webkit-keyframes y1{0%{opacity:0;height:0;top:224px}11%{opacity:1;height:12px;top:212px}22%{opacity:1;height:12px;top:212px}33%{opacity:0;height:0;top:224px}44%{opacity:0;height:0;top:224px}55%{opacity:0;height:0;top:224px}66%{opacity:0;height:0;top:224px}77%{opacity:1;height:12px;top:212px}88%{opacity:1;height:12px;top:212px}to{opacity:0;height:0;top:224px}}@keyframes h1{0%{opacity:1;width:90px}25%{opacity:1;width:90px}50%{opacity:1;width:110px}to{opacity:1;width:90px}}@-webkit-keyframes h1{0%{opacity:1;width:90px}25%{opacity:1;width:90px}50%{opacity:1;width:110px}to{opacity:1;width:90px}}@keyframes h2{0%{opacity:1;width:40px}25%{opacity:1;width:50px}50%{opacity:1;width:50px}to{opacity:1;width:40px}}@-webkit-keyframes h2{0%{opacity:1;width:40px}25%{opacity:1;width:50px}50%{opacity:1;width:50px}to{opacity:1;width:40px}}@keyframes h3{0%{opacity:1;width:10px}25%{opacity:1;width:20px}50%{opacity:1;width:20px}to{opacity:1;width:10px}}@-webkit-keyframes h3{0%{opacity:1;width:10px}25%{opacity:1;width:20px}50%{opacity:1;width:20px}to{opacity:1;width:10px}}@keyframes z1{0%{opacity:1;width:60px;left:240px}50%{opacity:1;width:70px;left:230px}to{opacity:1;width:60px;left:240px}}@-webkit-keyframes z1{0%{opacity:1;width:60px;left:240px}50%{opacity:1;width:70px;left:230px}to{opacity:1;width:60px;left:240px}}@keyframes z2{0%{opacity:1;width:100px;left:200px}50%{opacity:1;width:110px;left:190px}to{opacity:1;width:100px;left:200px}}@-webkit-keyframes z2{0%{opacity:1;width:100px;left:200px}50%{opacity:1;width:110px;left:190px}to{opacity:1;width:100px;left:200px}}@keyframes z3{0%{opacity:1;width:80px;left:220px}50%{opacity:1;width:90px;left:210px}to{opacity:1;width:80px;left:220px}}@-webkit-keyframes z3{0%{opacity:1;width:80px;left:220px}50%{opacity:1;width:90px;left:210px}to{opacity:1;width:80px;left:220px}}@keyframes z7{0%{opacity:1;height:28px;top:101px}25%{opacity:1;height:23px;top:106px}50%{opacity:1;height:18px;top:111px}75%{opacity:1;height:28px;top:101px}to{opacity:1;height:26px;top:103px}}@-webkit-keyframes z7{0%{opacity:1;height:28px;top:101px}25%{opacity:1;height:23px;top:106px}50%{opacity:1;height:18px;top:111px}75%{opacity:1;height:28px;top:101px}to{opacity:1;height:26px;top:103px}}@keyframes z8{0%{opacity:1;height:28px;top:140px}25%{opacity:1;height:23px;top:145px}50%{opacity:1;height:18px;top:150px}75%{opacity:1;height:28px;top:140px}to{opacity:1;height:26px;top:142px}}@-webkit-keyframes z8{0%{opacity:1;height:28px;top:140px}25%{opacity:1;height:23px;top:145px}50%{opacity:1;height:18px;top:150px}75%{opacity:1;height:28px;top:140px}to{opacity:1;height:26px;top:142px}}@keyframes z9{0%{opacity:1;height:28px;top:178px}25%{opacity:1;height:23px;top:183px}50%{opacity:1;height:18px;top:188px}75%{opacity:1;height:28px;top:178px}to{opacity:1;height:26px;top:180px}}@-webkit-keyframes z9{0%{opacity:1;height:28px;top:178px}25%{opacity:1;height:23px;top:183px}50%{opacity:1;height:18px;top:188px}75%{opacity:1;height:28px;top:178px}to{opacity:1;height:26px;top:180px}}@keyframes z10{0%{opacity:1;height:103px;top:103px}25%{opacity:1;height:98px;top:108px}50%{opacity:1;height:90px;top:116px}to{opacity:1;height:103px;top:103px}}@-webkit-keyframes z10{0%{opacity:1;height:103px;top:103px}25%{opacity:1;height:98px;top:108px}50%{opacity:1;height:90px;top:116px}to{opacity:1;height:103px;top:103px}}@-webkit-keyframes i1{0%{width:7px;left:10px;background-color:hsla(0,0%,94.9%,0)}40%{background-color:rgba(194,214,223,.4)}50%{background-color:rgba(71,185,232,.8)}80%{background-color:rgba(71,185,232,.3)}to{width:60px;left:233px;background-color:rgba(71,185,232,0)}}@keyframes i1{0%{width:7px;left:10px;background-color:hsla(0,0%,94.9%,0)}40%{background-color:rgba(194,214,223,.4)}50%{background-color:rgba(71,185,232,.8)}80%{background-color:rgba(71,185,232,.3)}to{width:60px;left:233px;background-color:rgba(71,185,232,0)}}.product-animation .text{position:absolute;left:350px;width:400px;height:20px;font-size:10px;color:#9f9f9f;animation-iteration-count:infinite;animation-timing-function:ease;animation-duration:5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:ease;-webkit-animation-duration:5s;cursor:default}.product-animation .batch1{animation-delay:-1s;-webkit-animation-delay:-1s}.product-animation .batch1,.product-animation .batch2{animation-name:batching;-webkit-animation-name:batching}.product-animation .batch2{animation-delay:-1.5s;-webkit-animation-delay:-1.5s}.product-animation .batch3{animation-delay:-2s;-webkit-animation-delay:-2s}.product-animation .batch3,.product-animation .batch4{animation-name:batching;-webkit-animation-name:batching}.product-animation .batch4{animation-delay:-2.5s;-webkit-animation-delay:-2.5s}.product-animation .batch5{animation-delay:-3s;-webkit-animation-delay:-3s}.product-animation .batch5,.product-animation .batch6{animation-name:batching;-webkit-animation-name:batching}.product-animation .batch6{animation-delay:-3.5s;-webkit-animation-delay:-3.5s}.product-animation .batch7{animation-delay:-4s;-webkit-animation-delay:-4s}.product-animation .batch7,.product-animation .batch8{animation-name:batching;-webkit-animation-name:batching}.product-animation .batch8{animation-delay:-4.5s;-webkit-animation-delay:-4.5s}.product-animation .batch9{animation-delay:-5s;-webkit-animation-delay:-5s}.product-animation .batch9,.product-animation .batch10{animation-name:batching;-webkit-animation-name:batching}.product-animation .batch10{animation-delay:-5.5s;-webkit-animation-delay:-5.5s}@keyframes batching{0%{opacity:0;top:240px}8%{opacity:.7;top:240px}10%{opacity:1;top:260px}18%{opacity:1;top:260px}20%{opacity:1;top:280px}28%{opacity:1;top:280px}30%{opacity:1;top:300px}38%{opacity:1;top:300px}40%{opacity:1;top:320px}48%{opacity:1;top:320px}50%{opacity:1;top:340px}58%{opacity:1;top:340px}60%{opacity:1;top:360px}68%{opacity:1;top:360px}70%{opacity:1;top:380px}78%{opacity:1;top:380px}80%{opacity:1;top:400px}88%{opacity:1;top:400px}90%{opacity:1;top:420px}98%{opacity:.7;top:420px}to{opacity:0;top:430px}}@-webkit-keyframes batching{0%{opacity:0;top:240px}8%{opacity:.7;top:240px}10%{opacity:1;top:260px}18%{opacity:1;top:260px}20%{opacity:1;top:280px}28%{opacity:1;top:280px}30%{opacity:1;top:300px}38%{opacity:1;top:300px}40%{opacity:1;top:320px}48%{opacity:1;top:320px}50%{opacity:1;top:340px}58%{opacity:1;top:340px}60%{opacity:1;top:360px}68%{opacity:1;top:360px}70%{opacity:1;top:380px}78%{opacity:1;top:380px}80%{opacity:1;top:400px}88%{opacity:1;top:400px}90%{opacity:1;top:420px}98%{opacity:.7;top:420px}to{opacity:0;top:430px}}.architecture-interactive{position:relative;height:428px;width:870px;margin:auto}@media (max-width:950px){.architecture-interactive{display:none}}@keyframes load{0%{-webkit-transform:translateY(5%);transform:translateY(5%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes load{0%{-webkit-transform:translateY(5%);transform:translateY(5%);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.architecture-interactive .architecture{position:relative;width:870px;height:428px;margin:auto}@media (max-width:950px){.architecture-interactive .architecture{display:none}}.architecture-interactive .gray{color:#828282}.architecture-interactive .wildsand{background-color:#f6f6f6}.architecture-interactive .picton{color:#47b9e8}.architecture-interactive .titletext{font-size:18px;font-weight:600;font-style:normal;text-align:center;padding-top:14px;letter-spacing:.3px}.architecture-interactive .subtext{position:absolute;font-size:14px;font-weight:500;font-style:normal;text-align:center;letter-spacing:.3px}.architecture-interactive .flow{position:absolute;top:95px;left:70px;width:598px;height:114px;background:url(/images/product/flow.svg);background-size:598px 114px;background-repeat:no-repeat}.architecture-interactive .pipeline{position:absolute;top:-10px;right:22px;width:55px;height:48px;background:url(/images/product/streaming_ingest.svg);background-repeat:no-repeat}.architecture-interactive .arch-logo{position:absolute;top:24px;left:100px;width:100px;height:100px;background:url(/images/product/diagram-logo.svg);background-size:100% auto;background-repeat:no-repeat}.architecture-interactive .data{position:absolute;top:-10px;right:22px;width:55px;height:48px;background:url(/images/product/live_data.svg);background-repeat:no-repeat}.architecture-interactive .query{position:absolute;top:-10px;right:22px;width:55px;height:48px;background:url(/images/product/historical_data.svg);background-repeat:no-repeat}.architecture-interactive .rect-ingest{position:absolute;width:304px;height:271px;border-radius:4px}.architecture-interactive .rect-retain{position:absolute;left:321px;width:227px;height:271px;border-radius:4px}.architecture-interactive .rect-analyze{position:absolute;left:565px;width:304px;height:271px;border-radius:4px}.architecture-interactive .rect-deploy{position:absolute;top:290px;width:870px;height:138px;border-radius:4px}.architecture-interactive .fa-database,.architecture-interactive .fa-inbox,.architecture-interactive .fa-rss,.architecture-interactive .fa-terminal{padding-bottom:4px}.architecture-interactive .fa-archive,.architecture-interactive .fa-chart-area,.architecture-interactive .fa-chart-pie,.architecture-interactive .fa-cloud,.architecture-interactive .fa-server,.architecture-interactive .fa-square{padding-right:4px}.architecture-interactive .memsql-logo{position:absolute;top:75px;left:385px;line-height:18px;width:110px;height:30px;cursor:default}.architecture-interactive .pipelines{position:absolute;top:75px;left:5px;line-height:18px;width:100px;height:70px;cursor:default}.architecture-interactive .datawarehouse{top:78px;left:95px}.architecture-interactive .datawarehouse,.architecture-interactive .sql{position:absolute;line-height:18px;width:100px;height:70px;cursor:default}.architecture-interactive .sql{top:75px;left:185px}.architecture-interactive .main{position:absolute;top:60px;left:286px;width:300px;height:170px;background:#fff;border:1px solid #bdbdbd;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.1);-webkit-transform:translateY(1px);transform:translateY(1px);-webkit-transition:1s;transition:1s;opacity:1;cursor:default}.architecture-interactive .animate{-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-name:load;animation-name:load;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.architecture-interactive .rectangle{position:absolute;background-color:#f6f6f6;border:1px solid #bdbdbd;border-radius:4px;-webkit-transition:1s;transition:1s;opacity:1;cursor:default}.architecture-interactive .square1{top:64px;left:35px;line-height:18px;text-align:center;width:82px;height:82px}.architecture-interactive .square2{top:64px;left:142px;line-height:18px;text-align:center;width:82px;height:82px}.architecture-interactive .rect1{top:182px;left:35px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect2{top:64px;left:650px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect3{top:182px;left:650px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect4{top:340px;left:35px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect5{top:340px;left:240px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect6{top:340px;left:445px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect7{top:340px;left:650px;line-height:55px;width:189px;height:55px}.architecture-interactive .rect8{top:340px;left:35px;line-height:55px;width:240px;height:55px}.architecture-interactive .rect9{top:340px;left:310px;line-height:55px;width:240px;height:55px}.architecture-interactive .rect10{top:340px;left:585px;line-height:55px;width:240px;height:55px}.architecture-interactive .rectangle:hover{box-shadow:0 1px 4px rgba(0,0,0,.15)}.architecture-interactive .main:hover,.architecture-interactive .rectangle:hover{background-color:#fff;border:1px solid #bdbdbd;border-radius:4px;-webkit-transition:.3s;transition:.3s}.architecture-interactive .main:hover{box-shadow:0 3px 14px rgba(0,0,0,.2);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.dummy-form{font-family:Lato,sans-serif;color:#d5322f;font-weight:700;font-size:16px;text-align:center;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dummy-form .copy{margin-bottom:40px}hr.hr{box-sizing:border-box;width:100%;height:0;margin:0 auto;border:0;border-top:1px solid #e6e6e6}hr.hr.full-bleed{max-width:100%}.feature-block{display:block;font-family:Lato,sans-serif;max-width:290px;margin:0 20px 40px;overflow:hidden;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;text-align:center;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.feature-block.is-spacer{height:0;width:290px;margin-top:0;margin-bottom:0}@media (max-width:600px){.feature-block.is-spacer{display:none}}.feature-block.dark-bg .header{color:#fff}.feature-block.dark-bg .copy{color:#ececec}.feature-block.dark-bg .learn-more{color:#fff}.feature-block.is-120-img .img-container{height:100px;margin-bottom:0}.feature-block.is-link:hover{-webkit-transform:translateY(-1px);transform:translateY(-1px)}.feature-block.is-link:hover .learn-more{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}.feature-block.is-monospace-header .header{font-size:22px;font-family:Inconsolata,monospace;font-weight:400;padding:.1em .7em .2em;background-color:#00223a;border-radius:4px;display:inline-block;margin-top:10px;margin-bottom:10px}.feature-block .img-container{display:flex;justify-content:center;align-items:center;height:80px;margin-bottom:20px}.feature-block .img-container .block-image{width:auto;max-width:100%;height:auto;max-height:100%}.feature-block .header{font-weight:700;color:#4f4f4f;margin:0 0 5px}.feature-block .copy,.feature-block .header{font-size:18px;line-height:1.5;text-align:center}.feature-block .copy{color:#828282;margin:0}.feature-block .learn-more{font-size:16px;text-align:center;color:#47b9e8;margin-top:20px;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;opacity:0}.feature-blocks{display:flex;flex-wrap:wrap;justify-content:center;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.feature-blocks.space-around{justify-content:space-around}.sup{font-size:.25em;vertical-align:super}.animation-rainbow-waves{position:absolute;bottom:0;left:0;width:100%;height:250px}@media (max-width:860px){.animation-rainbow-waves{height:180px}}@media (max-width:600px){.animation-rainbow-waves{height:125px}}.animation-rainbow-waves.bottom-up{top:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.section-container{padding-top:80px;padding-bottom:80px}@media (max-width:600px){.section-container{padding-top:60px;padding-bottom:60px}}.section-container.ribbon-top{position:relative;padding-top:240px;margin-top:-80px}@media (max-width:600px){.section-container.ribbon-top{padding-top:120px;margin-top:-40px}}@media (max-width:600px){.section-container.ribbon-top-hide-on-mobile{padding-top:60px;padding-bottom:60px}}.section-container.bondiblue{color:#fff;background:linear-gradient(103.43deg,#08b 32.78%,#55cdff 99.99%)}.section-container.nileblue{color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#17354a),to(#071d2c));background:linear-gradient(180deg,#17354a,#071d2c)}.section-container.snow{background:#f9f9f9}.section-container.white{background:#fff}@media (max-width:600px){.section-container.mobile-bondiblue{color:#fff;background:linear-gradient(103.43deg,#08b 32.78%,#55cdff 99.99%)}}@media (max-width:600px){.section-container.mobile-nileblue{color:#fff;background:-webkit-gradient(linear,left top,left bottom,from(#17354a),to(#071d2c));background:linear-gradient(180deg,#17354a,#071d2c)}}@media (max-width:600px){.section-container.mobile-snow{background:#f9f9f9}}@media (max-width:600px){.section-container.mobile-white{color:unset;background:#fff}}.page-container{max-width:1080px;padding-right:40px;padding-left:40px;margin:0 auto}@media (max-width:600px){.page-container{padding-right:30px;padding-left:30px}}.balance-text{text-wrap:balance}.typography-title{font-family:Lato,sans-serif;font-weight:700;color:#4f4f4f;margin:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.typography-title.align-center{text-align:center;margin:0 auto}@media (max-width:600px){.typography-title.align-center-mobile{text-align:center;margin:0 auto}}.typography-title.on-dark{color:#fff}.typography-title.shadow{text-shadow:0 1px 6px rgba(0,0,0,.5)}.typography-title.h1{font-size:48px;line-height:62px}@media (max-width:860px){.typography-title.h1{font-size:30px;line-height:36px}}.typography-title.h2{font-size:30px;line-height:36px}@media (max-width:860px){.typography-title.h2{font-size:24px;line-height:30px}}.typography-title.h3{font-size:24px;line-height:28px}@media (max-width:860px){.typography-title.h3{font-size:22px;line-height:26px}}.typography-title.h4{font-size:20px;line-height:24px}@media (max-width:860px){.typography-title.h4{font-size:20px;line-height:26px}}.vertical-spacing.top-small-2x{margin-top:10px}@media (max-width:600px){.vertical-spacing.top-small-2x{margin-top:5px}}.vertical-spacing.top-small-x{margin-top:20px}@media (max-width:600px){.vertical-spacing.top-small-x{margin-top:10px}}.vertical-spacing.top-small{margin-top:40px}@media (max-width:600px){.vertical-spacing.top-small{margin-top:20px}}.vertical-spacing.top-medium{margin-top:60px}@media (max-width:600px){.vertical-spacing.top-medium{margin-top:30px}}.vertical-spacing.top-large{margin-top:80px}@media (max-width:600px){.vertical-spacing.top-large{margin-top:40px}}.vertical-spacing.top-large-x{margin-top:120px}@media (max-width:600px){.vertical-spacing.top-large-x{margin-top:60px}}.vertical-spacing.top-large-2x{margin-top:160px}@media (max-width:600px){.vertical-spacing.top-large-2x{margin-top:80px}}.vertical-spacing.bottom-small-2x{margin-bottom:10px}@media (max-width:600px){.vertical-spacing.bottom-small-2x{margin-bottom:5px}}.vertical-spacing.bottom-small-x{margin-bottom:20px}@media (max-width:600px){.vertical-spacing.bottom-small-x{margin-bottom:10px}}.vertical-spacing.bottom-small{margin-bottom:40px}@media (max-width:600px){.vertical-spacing.bottom-small{margin-bottom:20px}}.vertical-spacing.bottom-medium{margin-bottom:60px}@media (max-width:600px){.vertical-spacing.bottom-medium{margin-bottom:30px}}.vertical-spacing.bottom-large{margin-bottom:80px}@media (max-width:600px){.vertical-spacing.bottom-large{margin-bottom:40px}}.vertical-spacing.bottom-large-x{margin-bottom:120px}@media (max-width:600px){.vertical-spacing.bottom-large-x{margin-bottom:60px}}.vertical-spacing.bottom-large-2x{margin-bottom:160px}@media (max-width:600px){.vertical-spacing.bottom-large-2x{margin-bottom:80px}}.about{font-family:Lato,sans-serif;text-align:center;color:#4f4f4f;background-color:#f9f9f9;width:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.about.is-simple .content{margin-bottom:20px}.about.is-dark{color:#fff;background:#131b43}.about .content{font-size:18px;line-height:1.5em;margin:0 auto 60px}.about .features{display:flex;justify-content:space-between}@media (max-width:965px){.about .features{flex-wrap:wrap;justify-content:space-around}}@media (max-width:550px){.about .features{flex-direction:column;align-items:center;margin-bottom:0}}.icon.margin-right{margin-right:.5em}.icon.margin-left{margin-left:.5em}.footer{font-family:Lato,sans-serif;background-color:#0a293f;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.footer.is-hidden{display:none}.footer.is-simple{padding:30px 0}@media (max-width:600px){.footer.is-simple{padding-bottom:160px}}.footer.is-simple .footer-links,.footer.is-simple .social-links{display:none}.footer.is-comparison-page{padding:30px 0}.footer.is-comparison-page .footer-links,.footer.is-comparison-page .social-links{display:none}.footer.is-comparison-page .disclaimer{display:block}.footer a{text-decoration:none;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;line-height:1.5625}.footer h4{margin-top:0;margin-bottom:.5rem}.footer .container-lg{padding-right:20px;padding-left:20px}.footer .disclaimer{display:none;font-size:12px;text-align:center;color:#bdbdbd;margin-right:auto;margin-bottom:20px;margin-left:auto;padding:0 20px}.footer .disclaimer a{color:#e6e6e6}.footer .disclaimer a:focus,.footer .disclaimer a:hover{color:#fff}.footer .footer-links{display:flex;flex-wrap:wrap;justify-content:flex-start;font-size:16px;font-weight:400;line-height:1.5625;margin-bottom:40px}.footer .footer-links ul{flex-basis:20%;min-width:160px;padding:0;margin:0;list-style:none;line-height:1.9}.footer .footer-links ul li{text-align:left}.footer .footer-links ul li a{font-size:.9rem;font-weight:400;color:#fff;padding:5px 30px 5px 5px}.footer .footer-links ul li a:focus,.footer .footer-links ul li a:hover{text-decoration:none;color:#fff;background:hsla(0,0%,100%,.1);border-radius:4px}.footer .footer-links ul li a span.hiring{font-size:12px;font-weight:700;color:#0a293f;padding:2px 6px;margin-left:5px;background:#fff;border-radius:4px}.footer .footer-links ul li a .no-wrap{white-space:nowrap}.footer .footer-links ul h4 a{font-weight:900;color:#bdbdbd}.footer .social-links{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.footer .social-links a{color:#bdbdbd}@media (max-width:600px){.footer .social-links .desktop-only{display:none}}.footer .social-links .social-link{font-size:26px;padding:10px 16px;line-height:1.5625}.footer .social-links .social-link:hover{color:#fff;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.footer .copyright{font-size:14px;line-height:1.5em;text-align:center;color:#bdbdbd;max-width:100%}.footer .copyright .copyright-link{color:#e6e6e6}.footer .copyright .copyright-link:hover{color:#fff}.fixed-mobile-cta,.footer .copyright .copyright-link:hover{-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.fixed-mobile-cta{position:fixed;bottom:0;left:0;z-index:900;display:none;visibility:visible;font-family:Lato,sans-serif;width:100vw;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.25);opacity:1}@media (max-width:600px){.fixed-mobile-cta{display:block}}.fixed-mobile-cta.is-hidden{visibility:hidden;opacity:0}.fixed-mobile-cta .inner{display:block;font-size:14px;font-weight:900;line-height:22px;text-align:center;color:#fff;padding:12px;margin:20px 20px 40px;background-color:#47b9e8;border-radius:4px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.fixed-mobile-cta .inner .fa-check{margin-right:5px}.fixed-mobile-cta .inner:active{-webkit-transform:translateY(1px);transform:translateY(1px);opacity:.8}.typography-text{font-family:Lato,sans-serif;color:#4f4f4f;margin:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.typography-text.align-center{text-align:center;margin:0 auto}@media (max-width:600px){.typography-text.align-center-mobile{text-align:center;margin:0 auto}}.typography-text.on-dark{color:#fff}.typography-text.shadow{text-shadow:0 1px 6px rgba(0,0,0,.5)}.typography-text.inline{display:inline}.typography-text.p1-caps{font-size:16px;font-weight:700;line-height:24px;text-transform:uppercase;letter-spacing:.04em}@media (max-width:860px){.typography-text.p1-caps{font-size:18px;line-height:26px}}.typography-text.p1-bold{font-size:16px;font-weight:700;line-height:24px}@media (max-width:860px){.typography-text.p1-bold{font-size:18px;line-height:26px}}.typography-text.p1-normal{font-size:16px;font-weight:400;line-height:24px}@media (max-width:860px){.typography-text.p1-normal{font-size:18px;line-height:26px}}.typography-text.p2-caps{font-size:13px;font-weight:700;line-height:20px;text-transform:uppercase;letter-spacing:.04em}@media (max-width:860px){.typography-text.p2-caps{font-size:15px;line-height:22px}}.typography-text.p2-bold{font-size:14px;font-weight:700;line-height:20px}@media (max-width:860px){.typography-text.p2-bold{font-size:16px;line-height:22px}}.typography-text.p2-normal{font-size:14px;font-weight:400;line-height:20px}@media (max-width:860px){.typography-text.p2-normal{font-size:16px;line-height:22px}}.partner-logos-banner{padding:70px 0;background-color:#f9f9f9;overflow:hidden}@media (max-width:860px){.partner-logos-banner{padding:40px 0}}.partner-logos-banner.no-bg{background-color:transparent}.partner-logos-banner.on-dark-bg .img-wrapper{-webkit-filter:contrast(0) brightness(1.6);filter:contrast(0) brightness(1.6)}.partner-logos-banner.is-monotone .img-wrapper{-webkit-filter:contrast(0) brightness(1);filter:contrast(0) brightness(1)}.partner-logos-banner.is-half-size .container-lg{justify-content:center}@media (max-width:600px){.partner-logos-banner.is-half-size .container-lg .title{margin-bottom:0}}.partner-logos-banner.is-half-size .container-lg .img-wrapper{max-width:570px;margin-left:40px}@media (max-width:600px){.partner-logos-banner.is-half-size .container-lg .img-wrapper{margin-top:40px;margin-left:0}}@media (max-width:860px){.partner-logos-banner.is-half-size .container-lg .img-wrapper .img{width:100%}}@media (max-width:600px){.partner-logos-banner.is-half-size .container-lg .img-wrapper .img{width:100%}}.partner-logos-banner .container-lg{display:flex;justify-content:space-between;align-items:center}@media (max-width:600px){.partner-logos-banner .container-lg{flex-direction:column;align-items:center}}.partner-logos-banner .container-lg .title{margin-right:40px}@media (max-width:600px){.partner-logos-banner .container-lg .title{margin-right:auto;margin-bottom:40px;margin-left:auto}}.partner-logos-banner .container-lg .img-wrapper{display:flex;justify-content:center;align-items:center;width:100%}.partner-logos-banner .container-lg .img-wrapper .img{position:relative;width:100%}@media (max-width:860px){.partner-logos-banner .container-lg .img-wrapper .img{width:120%}}@media (max-width:600px){.partner-logos-banner .container-lg .img-wrapper .img{width:130%}}.header-logo{display:flex;justify-content:center}.header-logo .inner{display:inline-block;height:26px;padding:0 20px;margin-bottom:30px}@media (max-width:550px){.header-logo .inner{height:18px}}.header-logo .inner .image{height:100%}.container-standard-lp{font-family:Lato,sans-serif;color:#4f4f4f;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}.container-standard-lp a{text-decoration:none;color:#08b}.container-standard-lp a:visited{color:#08b}.container-standard-lp .sign-in{text-align:center;display:block;font-size:.875em;margin-top:30px}.container-standard-lp .form-anchor-cta-wrapper{position:fixed;bottom:0;left:0;z-index:900;display:none;width:100vw;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.25);-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}@media (max-width:550px){.container-standard-lp .form-anchor-cta-wrapper{display:block}}.container-standard-lp .form-anchor-cta-wrapper .form-anchor-cta{display:block;font-size:14px;font-weight:900;line-height:22px;text-align:center;color:#fff;padding:12px;margin:20px 20px 40px;background-color:#d5322f;border-radius:4px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.container-standard-lp .form-anchor-cta-wrapper .form-anchor-cta .svg-inline--fa{margin-right:5px}.container-standard-lp .form-anchor-cta-wrapper .form-anchor-cta:active{-webkit-transform:translateY(1px);transform:translateY(1px);opacity:.8}.container-standard-lp .form-section.section{display:flex;justify-content:flex-start;flex-basis:40%;max-width:432px}@media (max-width:965px){.container-standard-lp .form-section.section{flex-basis:100%;max-width:100%;order:1000}}.container-standard-lp .form-section.section .container-lg.right{width:100%}@media (max-width:550px){.container-standard-lp .form-section.section .container-lg.right{padding:0}}.container-standard-lp .form-section.section .form-section-anchor{margin-top:-40px}.container-standard-lp .form-section.section .form-container{align-self:flex-start;max-width:420px;padding:50px;margin-top:-90px;background-color:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25)}@media (max-width:965px){.container-standard-lp .form-section.section .form-container{margin:0 auto}}@media (max-width:550px){.container-standard-lp .form-section.section .form-container{padding:0 30px;border-radius:0;box-shadow:none}}.container-standard-lp .form-section.section .form-container .form-header{text-align:center}.container-standard-lp .form-section.section .form-container .form-header .form-title{font-size:22px;font-weight:700;margin-top:0;margin-bottom:10px;line-height:1.5}@media (max-width:550px){.container-standard-lp .form-section.section .form-container .form-header .form-title{font-size:24px}}.container-standard-lp .form-section.section .form-container .form-header .form-subtitle{font-size:16px;font-weight:400;line-height:1.5;margin-top:0;margin-bottom:30px}@media (max-width:550px){.container-standard-lp .form-section.section .form-container .form-header .form-subtitle{font-size:16px;margin-bottom:40px}}.container-standard-lp .form-section.section .form-container .form-wrapper{width:100%}.container-standard-lp header.header{position:relative;text-align:center;padding:40px 40px 120px;margin-bottom:-60px;overflow:hidden}@media (max-width:550px){.container-standard-lp header.header{padding:25px 20px 110px;margin-bottom:-100px}}.container-standard-lp header.header .header-content{font-family:Lato,sans-serif;color:#fff;max-width:720px;margin:0 auto}@media (max-width:550px){.container-standard-lp header.header .header-content{margin-top:20px}}.container-standard-lp header.header .header-bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:radial-gradient(662.03px at 51.89% 127.5%,#175581 0,#002c4b 100%)}.container-standard-lp header.header .rainbow-waves{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.container-standard-lp header.header .rainbow-waves .waves{position:absolute;left:0;top:0;width:100%;height:100%;background-position-y:85%}.container-standard-lp header.header .rainbow-waves .waves.main{background:url(/images/standard-lp/ribbon.png) bottom repeat-x}@media (max-width:550px){.container-standard-lp header.header .rainbow-waves .waves.main{background-position-y:105%}}.container-standard-lp .main-content-section.section{display:flex;justify-content:flex-end;flex-basis:60%;max-width:648px}@media (max-width:965px){.container-standard-lp .main-content-section.section{justify-content:flex-start;flex-basis:100%;max-width:100%;order:-1000}}.container-standard-lp .main-content-section.section .main-img-wrapper{margin-bottom:50px}@media (max-width:550px){.container-standard-lp .main-content-section.section .main-img-wrapper{margin-bottom:40px}}.container-standard-lp .main-content-section.section .main-img-wrapper img{display:block;max-width:100%;max-height:320px;margin:0 auto 0 0}.container-standard-lp .main-content-section.section .main-img-wrapper img.shadow{box-shadow:0 5px 20px rgba(0,0,0,.2)}.container-standard-lp .main-content-section.section .main-content{font-family:Lato,sans-serif;font-size:16px;line-height:1.5625em;text-align:left;color:#4f4f4f}.container-standard-lp .main-content-section.section .main-content h1,.container-standard-lp .main-content-section.section .main-content h2{font-family:Lato,sans-serif;font-size:22px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-standard-lp .main-content-section.section .main-content h3{font-family:Lato,sans-serif;font-size:18px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-standard-lp .main-content-section.section .main-content h4,.container-standard-lp .main-content-section.section .main-content h5,.container-standard-lp .main-content-section.section .main-content h6{font-family:Lato,sans-serif;font-size:16px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-standard-lp .main-content-section.section .main-content p{font-family:Lato,sans-serif;font-size:16px;line-height:1.5625em;text-align:left;color:#4f4f4f;margin:0 0 10px}.container-standard-lp .main-content-section.section .main-content ul{padding-left:20px;margin:0}.container-standard-lp .main-content-section.section .main-content ul.no-bullet{padding-left:25px;list-style:none}.container-standard-lp .main-content-section.section .main-content ul li{position:relative;font-family:Lato,sans-serif;font-size:16px;line-height:1.5625em;color:#4f4f4f;margin:.5em 0}.container-standard-lp .main-content-section.section .main-content ul li .svg-inline--fa{position:absolute;top:7px;left:-25px;font-size:14px}.container-standard-lp .main-content-section.section .main-content ul li .svg-inline--fa.fa-code-branch{left:-20px}.container-standard-lp .main-content-section.section .main-content ul li .svg-inline--fa.fa-bolt{left:-21px}.container-standard-lp .main-content-section.section .main-content code{display:inline-block;font-family:Inconsolata,monospace;font-size:.875em;padding:.2em .5em .1em;background:#ececec;border-radius:.3em}.container-standard-lp .container-root{display:flex;flex-wrap:wrap;justify-content:center}.container-standard-lp .container-root>div{flex-basis:100%}@media (max-width:550px){.container-standard-lp .container-lg{padding:0 20px}}.container-standard-lp .container-lg.right{padding-right:40px;padding-left:0}@media (max-width:965px){.container-standard-lp .container-lg.right{padding:0 40px}}.container-standard-lp .section{padding:50px 0 70px}@media (max-width:550px){.container-standard-lp .section{padding:40px 0 50px}}.hero{position:relative;display:flex;justify-content:center;align-items:center;font-family:Lato,sans-serif;text-align:center;color:#fff;width:100%;padding:0 40px;margin-top:-80px;background:radial-gradient(662.03px at 51.89% 127.5%,#175581 0,#002c4b 100%);overflow:hidden;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.hero.absolute{position:absolute;top:0;left:0;z-index:-100}.hero.ribbon-bg{padding-bottom:220px}@media (max-width:600px){.hero.ribbon-bg{padding-bottom:110px}}.hero .custom-bg-wrapper,.hero .ribbon-bg-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.hero .bg-img{position:absolute;top:0;left:50%;width:100%;max-width:1320px;height:100%;background-size:cover;background-position:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-animation:fade-in .3s ease-out forwards;animation:fade-in .3s ease-out forwards;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-repeat:no-repeat}.hero .bg-img.full-bleed{max-width:100%}.hero .bg-img.tint:after{position:absolute;top:0;left:0;width:100%;height:100%;background:-webkit-gradient(linear,left bottom,left top,from(rgba(23,85,129,.09)),color-stop(91.28%,#175581));background:linear-gradient(0deg,rgba(23,85,129,.09),#175581 91.28%);content:"";mix-blend-mode:multiply}.hero .bg-img.fade-out{-webkit-mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(50%,#000),to(transparent));-webkit-mask-image:linear-gradient(90deg,transparent,#000 50%,transparent);mask-image:-webkit-gradient(linear,left top,right top,from(transparent),color-stop(50%,#000),to(transparent));mask-image:linear-gradient(90deg,transparent,#000 50%,transparent)}.hero .content-wrapper{display:flex}.hero .content-wrapper .content{position:relative;z-index:100;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:440px;padding-top:80px}@media (max-width:860px){.hero .content-wrapper .content{min-height:320px}}@media (max-width:600px){.hero .content-wrapper .content{min-height:260px}}.card-thank-you{position:relative;font-family:Lato,sans-serif;line-height:1.5625;text-align:center;color:#4f4f4f;max-width:380px;padding:50px;background-color:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25);overflow:auto}@media (max-width:600px){.card-thank-you{padding:30px}}.card-thank-you .message-image{width:100%;max-width:140px;margin:40px auto 30px}.centering-wrapper{display:flex;flex-direction:column;height:100%}.centering-wrapper.horizontal{align-items:center}.centering-wrapper.vertical{justify-content:center}.loading-icon .loading-logo{fill:#828282;-webkit-animation:components-loading-color 1.5s ease-in-out infinite;animation:components-loading-color 1.5s ease-in-out infinite}@-webkit-keyframes components-loading-color{0%{fill:"#bdbdbd"}50%{fill:#d4d4d4}to{fill:"#bdbdbd"}}@keyframes components-loading-color{0%{fill:"#bdbdbd"}50%{fill:#d4d4d4}to{fill:"#bdbdbd"}}.loading-icon .loading-circle{stroke-linecap:round;stroke:#d4d4d4;fill:transparent}.loading-icon .loading-circle-stroke{-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;stroke-linecap:round;stroke:#bdbdbd;fill:transparent}.loading-icon.large .loading-circle{stroke-width:2px}.loading-icon.large .loading-circle-stroke{-webkit-animation:components-loading-large 5s linear infinite;animation:components-loading-large 5s linear infinite;stroke-dasharray:288.88px}@-webkit-keyframes components-loading-large{0%{-webkit-transform:rotate(0);transform:rotate(0);stroke-dashoffset:60.72px}50%{-webkit-transform:rotate(2turn);transform:rotate(2turn);stroke-dashoffset:288.88px}to{-webkit-transform:rotate(3turn);transform:rotate(3turn);stroke-dashoffset:60.72px}}.loading-icon.medium .loading-circle{stroke-width:2px}.loading-icon.medium .loading-circle-stroke{-webkit-animation:components-loading-large 5s linear infinite;animation:components-loading-large 5s linear infinite;stroke-dasharray:141.3px}@keyframes components-loading-large{0%{-webkit-transform:rotate(0);transform:rotate(0);stroke-dashoffset:29.7px}50%{-webkit-transform:rotate(2turn);transform:rotate(2turn);stroke-dashoffset:141.3px}to{-webkit-transform:rotate(3turn);transform:rotate(3turn);stroke-dashoffset:29.7px}}.loading-icon.small .loading-circle{stroke-width:2px}.loading-icon.small .loading-circle-stroke{-webkit-animation:components-loading-small 5s linear infinite;animation:components-loading-small 5s linear infinite;stroke-dasharray:56.52px}@-webkit-keyframes components-loading-small{0%{-webkit-transform:rotate(0);transform:rotate(0);stroke-dashoffset:11.88px}50%{-webkit-transform:rotate(2turn);transform:rotate(2turn);stroke-dashoffset:56.52px}to{-webkit-transform:rotate(3turn);transform:rotate(3turn);stroke-dashoffset:11.88px}}@keyframes components-loading-small{0%{-webkit-transform:rotate(0);transform:rotate(0);stroke-dashoffset:11.88px}50%{-webkit-transform:rotate(2turn);transform:rotate(2turn);stroke-dashoffset:56.52px}to{-webkit-transform:rotate(3turn);transform:rotate(3turn);stroke-dashoffset:11.88px}}.loading-icon.small .loading-logo{display:none}.loading-icon.primary .loading-circle-stroke{stroke:#08b}.loading-icon.success .loading-circle-stroke{stroke:#5bc759}.loading-icon.warn .loading-circle-stroke{stroke:#a7880c}.loading-icon.error .loading-circle-stroke{stroke:#d5322f}.modal{position:fixed;top:0;left:0;z-index:1100;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background-color:rgba(0,0,0,.5);-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-name:modalFadeIn;animation-name:modalFadeIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.modal.is-video .close-modal{display:none}@media (max-width:600px){.modal.is-video .modal-wrapper{width:auto}.modal.is-video .modal-wrapper .close-button{top:-35px;right:-10px}.modal.is-video .modal-wrapper .close-button:after,.modal.is-video .modal-wrapper .close-button:before{border-bottom:3px solid #fff!important}}.modal.is-video .modal-wrapper .modal-card{background-color:#000}.modal .loading-spinner{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.modal .modal-wrapper{position:relative;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-name:modalCardEaseIn;animation-name:modalCardEaseIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@media (max-width:600px){.modal .modal-wrapper{width:calc(100vw - 20px)}}.modal .modal-wrapper .modal-card{min-width:10vw;max-width:100%;max-height:calc(100vh - 20px);background-color:#fff;border-radius:8px;overflow-y:auto;margin:0 auto}.modal .modal-wrapper .close-button{position:absolute;top:0;right:-40px;width:20px;height:20px;padding:20px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;cursor:pointer}@media (max-width:600px){.modal .modal-wrapper .close-button{top:4px;right:4px}.modal .modal-wrapper .close-button:after,.modal .modal-wrapper .close-button:before{border-bottom:3px solid #4f4f4f!important}}.modal .modal-wrapper .close-button:hover{opacity:.6}.modal .modal-wrapper .close-button:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.modal .modal-wrapper .close-button:after,.modal .modal-wrapper .close-button:before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:20px;height:0;margin:auto;border-bottom:3px solid #fff;border-radius:3px;content:""}.modal .modal-wrapper .close-button:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}@-webkit-keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes modalCardEaseIn{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes modalCardEaseIn{0%{-webkit-transform:translateY(50px);transform:translateY(50px)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.resources-carousel{position:relative;padding-top:40px;padding-bottom:20px}.resources-carousel:first-child{padding-top:0}.resources-carousel:last-child:before{display:none}.resources-carousel:before{content:"";border-top:1px solid #bdbdbd;width:100%;max-width:914px;position:absolute;bottom:0;left:0}@media (max-width:1228px){.resources-carousel:before{max-width:596px}}@media (max-width:650px){.resources-carousel:before{max-width:278px;left:40px}}@media (max-width:330px){.resources-carousel:before{left:20px}}.resources-carousel.is-featured{padding-top:0;padding-bottom:40px}.resources-carousel.is-featured:before{display:none}@media (max-width:650px){.resources-carousel.is-featured .slider-wrapper{margin-left:0}}.resources-carousel .slider-wrapper{position:relative;width:954px}@media (max-width:1228px){.resources-carousel .slider-wrapper{width:636px}}@media (max-width:650px){.resources-carousel .slider-wrapper .slick-list{padding-left:40px}}@media (max-width:330px){.resources-carousel .slider-wrapper .slick-list{padding-left:20px}}.resources-carousel .slider-wrapper .slick-track{display:flex}@media (max-width:650px){.resources-carousel .slider-wrapper .slick-track{margin:1px}}.carousel-arrow{position:absolute;top:-40px;width:24px;height:24px;background-color:#fff;border:1px solid #bdbdbd;border-radius:50%;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (max-width:650px){.carousel-arrow{display:none}}.carousel-arrow:hover{background:#f9f9f9}.carousel-arrow:before{position:absolute;top:25%;width:42%;height:42%;border-top:1px solid #333;border-left:1px solid #333;-webkit-transform-origin:center;transform-origin:center;content:"";-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.carousel-arrow.left{right:74px}.carousel-arrow.left:before{left:40%;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.carousel-arrow.right{right:40px}.carousel-arrow.right:before{left:20%;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.resource-card-component{position:relative;display:block;font-family:Lato,sans-serif;min-width:278px;max-width:278px;height:413px;margin-right:40px;margin-bottom:40px;background:#fff;border:1px solid #bdbdbd;border-radius:8px;overflow:hidden;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;cursor:pointer}@media (max-width:650px){.resource-card-component{margin-right:20px;margin-bottom:20px}}.resource-card-component.equal-margin{margin:20px}@media (max-width:600px){.resource-card-component.equal-margin{margin:20px}}.resource-card-component:not(.no-hover):hover{box-shadow:0 1px 6px rgba(0,0,0,.12)}.resource-card-component:not(.no-hover).with-excerpt:hover .resource-card-img{opacity:0}.resource-card-component:not(.no-hover).with-excerpt:hover .resource-card-bottom{-webkit-transform:translateY(-183px);transform:translateY(-183px)}.resource-card-component:not(.no-hover).with-excerpt:hover .resource-card-excerpt{-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;-webkit-transition-delay:.08s;transition-delay:.08s;opacity:1}.resource-card-component.view-more{display:flex;justify-content:center;align-items:center}.resource-card-component.view-more .resource-card-action{position:unset;bottom:unset;left:unset;display:flex;justify-content:center;align-items:center}.resource-card-component.view-more .resource-card-action .carousel-arrow{position:relative;top:unset;right:unset;margin-left:.5em}@media (max-width:650px){.resource-card-component.view-more .resource-card-action .carousel-arrow{display:block}}.resource-card-component.view-more .resource-card-action .carousel-arrow:before{top:30%}.resource-card-component .resource-card-img-wrapper{position:relative;height:183px;background:#f9f9f9;border-radius:8px 8px 0 0;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;will-change:transform}.resource-card-component .resource-card-img-wrapper .resource-card-img{width:100%;height:100%;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;-o-object-fit:cover;object-fit:cover;will-change:opacity}.resource-card-component .resource-card-bottom{min-height:183px;padding:20px;background:#fff;border-radius:8px;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;will-change:transform}.resource-card-component .resource-card-bottom .resource-card-category{font-size:.625rem;font-weight:900;line-height:13px;text-transform:uppercase;color:#828282;padding-bottom:6px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;letter-spacing:.15em}.resource-card-component .resource-card-bottom .resource-card-title{font-size:1.25rem;font-weight:700;line-height:26px;color:#4f4f4f}.resource-card-component .resource-card-bottom .resource-card-excerpt{font-size:.875rem;font-weight:400;line-height:24px;color:#828282;margin-top:8px;-webkit-transition:.08s ease-in-out;transition:.08s ease-in-out;-webkit-transition-delay:0s;transition-delay:0s;opacity:0;will-change:opacity}.resource-card-component .resource-card-action{position:absolute;bottom:20px;left:20px;color:#08b}.container-standard-ty{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container-standard-ty .hero{margin-bottom:-250px;height:340px}@media (max-width:600px){.container-standard-ty .hero{margin-bottom:-125px;height:200px}}.container-standard-ty .hero .animation-rainbow-waves{height:250px}@media (max-width:600px){.container-standard-ty .hero .animation-rainbow-waves{height:125px}}.container-standard-ty .section.message{position:relative}.container-standard-ty .section.resources{background-color:#f9f9f9}.container-standard-ty .section.resources .header-wrapper{line-height:1.5625;font-family:Lato,sans-serif;color:#4f4f4f;padding-bottom:60px}.container-standard-ty .section.resources .header-wrapper .header{font-size:22px;font-weight:700;text-align:center;margin:0 0 10px}.container-standard-ty .section.resources .header-wrapper .content{font-size:16px;text-align:center;max-width:550px;margin:0 auto}.container-standard-ty .section.resources .resource-cards{display:flex;justify-content:center;flex-wrap:wrap}.field-error-message{font-size:.75em;color:#d5322f;margin-top:6px}.field-error-message .fa-exclamation-triangle{margin-right:.4em}.floating-input-text{position:relative}.floating-input-text.is-error input.floating-field{padding:.75em .5em .25em;border:.125em solid #d5322f}.floating-input-text.is-error input.floating-field:focus{border-color:#d5322f}.floating-input-text.is-error input.floating-field:focus~label.floating-label{color:#d5322f}.floating-input-text.is-success input.floating-field{padding:.75em .5em .25em;border:.125em solid #5bc759}.floating-input-text.is-success input.floating-field:focus{border-color:#5bc759}.floating-input-text.is-success input.floating-field:focus~label.floating-label{color:#5bc759}.floating-input-text.is-filled.is-touched input.floating-field{background-color:#fff}.floating-input-text.is-filled label.floating-label{top:-.625em;font-size:12px;font-weight:700;line-height:1.25;padding:0 .25em;background-color:#fff;border-radius:4px}.floating-input-text.is-filled.is-error label.floating-label{color:#d5322f}.floating-input-text.is-filled.is-success label.floating-label{color:#5bc759}.floating-input-text.is-honeypot{display:none}.floating-input-text label.floating-label{position:absolute;top:.625em;left:.625em;font-weight:400;white-space:nowrap;color:#828282;padding:0}.floating-input-text input.floating-field,.floating-input-text label.floating-label{display:block;font-size:16px;line-height:1.5;margin:0;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.floating-input-text input.floating-field{font-family:Lato,sans-serif;color:#4f4f4f;box-sizing:border-box;width:100%;padding:.875em .625em .375em;background-color:#f6f6f6;border:none;border-radius:4px;-webkit-transition-property:background;transition-property:background;outline:0}.floating-input-text input.floating-field:hover{background-color:#efefef}.floating-input-text input.floating-field:focus{padding:.75em .5em .25em;background-color:#fff;border:.125em solid #47b9e8;-webkit-appearance:none;-moz-appearance:none;appearance:none}.floating-input-text input.floating-field:focus+label.floating-label{top:-.625em;font-size:12px;font-weight:700;line-height:1.25;color:#47b9e8;padding:0 .25em;background-color:#fff;border-radius:4px}.floating-input-text .message{font-family:Lato,sans-serif;font-size:.75rem;color:#828282;margin-top:6px}.submit-button{display:flex;justify-content:center;align-items:center}.submit-button .submit-loading-icon{margin-right:.5em}.form-card{width:100%;max-width:420px;min-height:300px;padding:50px;background:#fff;border:1px solid #e6e6e6;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.25);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:860px){.form-card{margin:0 auto}}@media (max-width:600px){.form-card{padding:40px 30px}}@media (max-width:510px){.form-card{border-radius:0;max-width:100%}}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.form-card.in-modal{min-width:500px;background:none;border:none;border-radius:0;box-shadow:none}@media (max-width:600px){.form-card.in-modal{min-width:100%}}.form-card.in-modal .form-header-wrapper .form-header{font-size:36px}@media (max-width:600px){.form-card.in-modal .form-header-wrapper .form-header{font-size:30px}}.form-card.thank-you{min-height:500px}.form-card .form-header-wrapper{text-align:center;color:#4f4f4f;margin-bottom:30px}@media (max-width:600px){.form-card .form-header-wrapper{margin-bottom:20px}}.form-card .form-header-wrapper .form-header{font-family:Lato,sans-serif;font-size:22px;font-weight:700;line-height:1.3;margin-bottom:20px}@media (max-width:600px){.form-card .form-header-wrapper .form-header{margin-bottom:10px}}.form-card .form-header-wrapper .form-subheader{font-family:Lato,sans-serif;font-size:16px;line-height:1.5;max-width:90%;margin:0 auto}.form-card .form-wrapper{-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-name:fadeIn;animation-name:fadeIn}body.mobile-menu-is-open{overflow:hidden}.mobile-menu-wrapper{position:fixed;top:0;left:0;z-index:9999;width:100%;height:100vh;background-color:rgba(0,0,0,.5);-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;opacity:0;pointer-events:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.mobile-menu-wrapper.show{opacity:1;pointer-events:auto}.mobile-menu-wrapper .mobile-menu{position:fixed;top:10px;left:10px;display:flex;flex-direction:column;justify-content:space-between;width:calc(100% - 20px);height:calc(100% - 20px);background-color:#fff;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.4);overflow:hidden;-webkit-transform:rotateX(-10deg) scale(.98);transform:rotateX(-10deg) scale(.98);-webkit-transform-origin:100% 0;transform-origin:100% 0;-webkit-perspective:3000px;perspective:3000px;-webkit-transition:.2s ease-in-out;transition:.2s ease-in-out;opacity:0;pointer-events:none;will-change:transform,opacity}.mobile-menu-wrapper .mobile-menu.show{opacity:1;pointer-events:auto;-webkit-transform:rotateX(0deg) scale(1);transform:rotateX(0deg) scale(1)}.mobile-menu-wrapper .mobile-menu.search-open{height:60px!important}.mobile-menu-wrapper .mobile-menu .menu-dropdown-inner{padding:20px 0;overflow:auto}.mobile-menu-wrapper .mobile-menu .menu-dropdown-inner.hide{display:none}.mobile-menu-wrapper .mobile-menu .popup-close-button{position:absolute;top:4px;right:4px;width:20px;height:20px;padding:20px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;cursor:pointer}.mobile-menu-wrapper .mobile-menu .popup-close-button.search-close-button{top:10px;right:10px}.mobile-menu-wrapper .mobile-menu .popup-close-button:hover{opacity:.6}.mobile-menu-wrapper .mobile-menu .popup-close-button:before{-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.mobile-menu-wrapper .mobile-menu .popup-close-button:after,.mobile-menu-wrapper .mobile-menu .popup-close-button:before{position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:20px;height:0;margin:auto;border-bottom:3px solid #4f4f4f;border-radius:3px;content:""}.mobile-menu-wrapper .mobile-menu .popup-close-button:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}.mobile-menu-wrapper .navbar-search-input{font-family:Lato,sans-serif;font-size:18px;color:#4f4f4f;padding:19px 50px 19px 24px;margin:0;border:0;border-radius:4px;width:100%}.mobile-menu-wrapper .navbar-search-input.show{display:block}.mobile-menu-wrapper .navbar-search-input:focus{box-shadow:none;outline:none}.mobile-menu-wrapper .mobile-menu-link{padding:12px 26px;display:block;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.mobile-menu-wrapper .mobile-menu-link:hover{background-color:#f2f2f2}.mobile-menu-wrapper .mobile-menu-link .link-wrapper{display:flex;align-items:center}.mobile-menu-wrapper .mobile-menu-link .link-icon{display:flex;justify-content:center;align-items:center;width:36px;height:36px;margin-right:20px;background-color:#e6f3f8;border-radius:50%;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.mobile-menu-wrapper .mobile-menu-link .link-icon i{font-size:16px;color:#08b;padding:0}.mobile-menu-wrapper .mobile-menu-link .link-name{font-size:18px;font-weight:700;color:#4f4f4f;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.mobile-menu-wrapper .mobile-menu-link .link-description{font-size:14px;color:#828282;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.mobile-menu-wrapper .navbar_cta{display:block;font-family:Lato,sans-serif;font-size:16px;font-weight:900;text-align:center;color:#08b;padding:17px 0;background-color:#e6f3f8;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.mobile-menu-wrapper .navbar_cta.hide{display:none}.mobile-menu-wrapper .navbar_cta:hover{color:#4f4f4f;background-color:#ececec}.navbar-blog-menu .header{padding:0 25px}.navbar-blog-menu .post-block.link{display:block;padding:15px 25px}.navbar-blog-menu .post-block.link .link-icon{width:70px;height:70px;margin-right:15px;background-color:#bdbdbd;background-size:cover;border-radius:4px}.navbar-blog-menu .post-block.link .link-content{max-width:240px}.navbar-blog-menu .post-block.link .link-content .link-name{line-height:1.5em;white-space:normal;overflow:hidden}.navbar-blog-menu .post-block.link .link-content .link-description{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navbar{position:fixed;position:-webkit-sticky;position:sticky;top:0;z-index:1000;font-family:Lato,sans-serif;width:100%;background:#0a293f;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:600px){.navbar{justify-content:center}}.navbar.scrolled{background:rgba(10,41,63,.9)}@media (max-width:600px){.navbar.hidden-on-mobile{-webkit-transform:translateY(-80px);transform:translateY(-80px)}}.navbar.absolute{position:absolute}.navbar.inverted{background:hsla(0,0%,100%,.9)}.navbar.inverted .root-link:hover .root-link-btn:before{display:none}.navbar.inverted .root-link-btn{color:#131b43}.navbar.inverted .root-link-btn.ghost:hover,.navbar.inverted .root-link-btn:hover{background:hsla(0,0%,94.9%,.6)}.navbar.inverted .right-content .root-link-btn{color:#131b43;border-color:#131b43}.navbar.inverted .right-content .root-link-btn:hover{border-color:#131b43}.navbar.inverted .hamburger-button .hamburger-inner,.navbar.inverted .hamburger-button .hamburger-inner:after,.navbar.inverted .hamburger-button .hamburger-inner:before{background-color:#131b43}.navbar.transparent{background:transparent}.navbar.is-comparison-page .blog,.navbar.is-comparison-page .contact,.navbar.is-comparison-page .docs,.navbar.is-comparison-page .download,.navbar.is-comparison-page .product .keep-alive,.navbar.is-comparison-page .product .menu-dropdown,.navbar.is-comparison-page .resources,.navbar.is-comparison-page .search,.navbar.is-comparison-page .sign-in,.navbar.is-comparison-page .solutions .keep-alive,.navbar.is-comparison-page .solutions .menu-dropdown,.navbar.is-comparison-page .support{display:none}.navbar.is-comparison-page .right-content .landing-cta{display:block}.navbar.is-event-page .blog,.navbar.is-event-page .contact,.navbar.is-event-page .docs,.navbar.is-event-page .download,.navbar.is-event-page .hamburger-button,.navbar.is-event-page .product,.navbar.is-event-page .resources,.navbar.is-event-page .search,.navbar.is-event-page .sign-in,.navbar.is-event-page .solutions,.navbar.is-event-page .support,.navbar.is-single-anchor-cta .blog,.navbar.is-single-anchor-cta .contact,.navbar.is-single-anchor-cta .docs,.navbar.is-single-anchor-cta .download,.navbar.is-single-anchor-cta .hamburger-button,.navbar.is-single-anchor-cta .product,.navbar.is-single-anchor-cta .resources,.navbar.is-single-anchor-cta .search,.navbar.is-single-anchor-cta .sign-in,.navbar.is-single-anchor-cta .solutions,.navbar.is-single-anchor-cta .support{display:none}.navbar.is-single-anchor-cta .right-content .landing-cta{display:block}.navbar.is-event-page{background-color:#131b43}@media (max-width:600px){.navbar.is-event-page{background:transparent}}.navbar.is-event-page .right-content .landing-cta.event{display:block}.navbar.is-simple .center-content,.navbar.is-simple .right-content{display:none}.navbar .fa-search{font-size:14px}.navbar .navbar-wrapper{display:flex;justify-content:space-between;align-items:center;height:80px;margin:0 auto}@media (max-width:600px){.navbar .navbar-wrapper{justify-content:center}}.navbar .left-content{display:flex;align-items:center}.navbar .left-content .logo{padding:0 20px;margin-right:20px}@media (max-width:600px){.navbar .left-content .logo{margin:0}}.navbar .left-content .logo img{display:block}@media (max-width:600px){.navbar .left-content .logo img{margin:0 auto}}@media (max-width:960px){.navbar .center-content{display:none}}.navbar .right-content{display:flex;align-items:center;padding-right:20px}@media (max-width:960px){.navbar .right-content{padding-right:10px}}.navbar .right-content .root-link-btn{margin-left:10px}.navbar .right-content .ctas{display:flex}@media (max-width:600px){.navbar .right-content .ctas{display:none}}.navbar .right-content .ctas .fa-arrow-to-bottom,.navbar .right-content .ctas .fa-user-circle{margin-right:.5em}.navbar .right-content .landing-cta{display:none}.navbar .right-content .landing-cta:hover{opacity:.9}.navbar .right-content .landing-cta .icon{margin-right:.5em}.navbar .hamburger-button{position:relative;display:none;width:20px;padding:20px 30px;margin-left:10px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;cursor:pointer}@media (max-width:600px){.navbar .hamburger-button{position:absolute;right:10px}}@media (max-width:960px){.navbar .hamburger-button{display:flex}}.navbar .hamburger-button:hover{opacity:.6}.navbar .hamburger-button .hamburger-inner{position:absolute;top:11px;left:20px;width:20px;height:3px;background-color:#fff;border-radius:3px}.navbar .hamburger-button .hamburger-inner:before{position:absolute;top:7px;width:20px;height:3px;background-color:#fff;border-radius:3px;content:""}.navbar .hamburger-button .hamburger-inner:after{position:absolute;top:14px;width:100%;height:3px;background-color:#fff;border-radius:3px;content:""}.navbar .root-links{display:flex;padding:0;margin:0;list-style:none}@media (max-width:1150px){.navbar .root-links .root-link:nth-last-of-type(-n+2){display:none}}.navbar .root-links .root-link:hover .menu-dropdown{opacity:1;pointer-events:auto}.navbar .root-links .root-link:hover .menu-dropdown .menu-dropdown-inner{opacity:1}.navbar .root-links .root-link:hover .root-link-btn:before{position:absolute;top:52px;left:50%;z-index:-1;width:18px;height:18px;background-color:#fff;-webkit-transform:rotate(45deg) translateX(-50%);transform:rotate(45deg) translateX(-50%);content:""}.navbar .root-link-btn-wrapper{position:relative}.navbar .root-link-btn-wrapper .keep-alive{position:absolute;width:100%;height:20px;margin:0 auto}.navbar .root-link-btn{position:relative;display:block;font-size:1em;font-weight:700;white-space:nowrap;color:#fff;padding:10px 18px;border:0;border-radius:4px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .root-link-btn:hover{background:hsla(0,0%,100%,.09);-webkit-transform:translateY(-1px);transform:translateY(-1px)}.navbar .root-link-btn.ghost{background-color:transparent;border:1px solid hsla(0,0%,100%,.5)}.navbar .root-link-btn.ghost:hover{background:hsla(0,0%,100%,.09);background-color:transparent;border:1px solid hsla(0,0%,100%,.5)}.navbar .root-link-btn.blaze-orange{background:#ff6900}.navbar .modal{display:none}.navbar .menu-dropdown{position:absolute;top:70px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);opacity:0;pointer-events:none}.navbar .menu-dropdown .menu-dropdown-wrapper{min-height:238px;background-color:#fff;border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.1);overflow:hidden}.navbar .menu-dropdown .menu-dropdown-inner{display:flex;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;opacity:0}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main{display:flex;flex-direction:column;justify-content:center;line-height:1.5625;width:228px;padding:30px 24px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main:hover{background:#f2f2f2}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main .menu-dropdown-main-image{display:flex;align-items:center;width:100%;height:70px;margin-bottom:10px}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main .menu-dropdown-main-image.full{background:#e6e6e6;background-size:cover;background-position:50%}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main .menu-dropdown-main-header{font-size:16px;font-weight:700;white-space:nowrap;color:#4f4f4f;overflow:hidden;text-overflow:ellipsis}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main .menu-dropdown-main-summary{font-size:14px;line-height:1.5625;height:43.75px;color:#828282}.navbar .menu-dropdown .menu-dropdown-inner .menu-dropdown-main .menu-dropdown-main-cta{font-size:14px;color:#08b;margin-top:10px}.navbar .menu-dropdown .categories{display:flex;padding:30px 24px}.navbar .menu-dropdown .categories .category-cols{display:flex;justify-content:space-around}.navbar .menu-dropdown .categories .category-cols:last-child{margin-right:0}.navbar .menu-dropdown .categories .category-cols .category-col{display:flex;flex-direction:column;white-space:nowrap;margin-right:30px}.navbar .menu-dropdown .categories .category-cols .category-col .category-header{font-size:12px;font-weight:900;text-transform:uppercase;color:#bdbdbd;padding:.65em .8em}.navbar .menu-dropdown .categories .category-cols .category-col .category-name{font-size:14px;font-weight:700;color:#4f4f4f;padding:.65em .8em;border-radius:4px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .menu-dropdown .categories .category-cols .category-col .category-name:hover{background:#f2f2f2}.navbar .menu-dropdown .categories .category-cols .category-col .category-name.cta{font-weight:400;color:#08b;opacity:.8}.navbar .menu-dropdown .categories .category-cols .category-col .category-block{display:flex;align-items:center;line-height:1.3;padding:.4em .8em;border-radius:4px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .menu-dropdown .categories .category-cols .category-col .category-block:hover{background:#f2f2f2}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-icon{display:flex;justify-content:center;align-items:center;color:#fff;width:32px;height:32px;margin-right:15px;border-radius:50%;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-icon.mantis{background:#5bc759}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-icon.picton{background:#47b9e8}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-icon.lavender{background:#bb6bd9}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-content{font-size:14px}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-content .category-block-header{font-weight:700;color:#4f4f4f;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.navbar .menu-dropdown .categories .category-cols .category-col .category-block .category-block-content .category-block-summary{color:#828282}.container-beta-thank-you-lp{font-family:Lato,sans-serif;color:#4f4f4f;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}.container-beta-thank-you-lp header.header{position:relative;text-align:center;padding:40px 40px 120px;margin-bottom:-60px;overflow:hidden}@media (max-width:550px){.container-beta-thank-you-lp header.header{padding:25px 20px 110px;margin-bottom:-100px}}.container-beta-thank-you-lp header.header .header-content{font-family:Lato,sans-serif;color:#fff;max-width:720px;margin:0 auto}@media (max-width:550px){.container-beta-thank-you-lp header.header .header-content{margin-top:20px}}.container-beta-thank-you-lp header.header .header-bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:radial-gradient(662.03px at 51.89% 127.5%,#175581 0,#002c4b 100%)}.container-beta-thank-you-lp header.header .rainbow-waves{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.container-beta-thank-you-lp header.header .rainbow-waves .waves{position:absolute;left:0;top:0;width:100%;height:100%;background-position-y:85%}.container-beta-thank-you-lp header.header .rainbow-waves .waves.main{background:url(/images/standard-lp/ribbon.png) bottom repeat-x}@media (max-width:550px){.container-beta-thank-you-lp header.header .rainbow-waves .waves.main{background-position-y:105%}}.container-beta-thank-you-lp .cms-content a{text-decoration:none;color:#08b}.container-beta-thank-you-lp .cms-content a:visited{color:#08b}.container-beta-thank-you-lp .cms-content h1,.container-beta-thank-you-lp .cms-content h2{font-family:Lato,sans-serif;font-size:22px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-beta-thank-you-lp .cms-content h3{font-family:Lato,sans-serif;font-size:18px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-beta-thank-you-lp .cms-content h4,.container-beta-thank-you-lp .cms-content h5,.container-beta-thank-you-lp .cms-content h6{font-family:Lato,sans-serif;font-size:16px;font-weight:700;line-height:1.5625em;text-align:left;color:#4f4f4f;margin-top:0;margin-bottom:10px}.container-beta-thank-you-lp .cms-content p{font-family:Lato,sans-serif;font-size:16px;line-height:1.5625em;text-align:left;color:#4f4f4f;margin:0 0 10px}.container-beta-thank-you-lp .cms-content ol,.container-beta-thank-you-lp .cms-content ul{padding-left:20px;margin:0}.container-beta-thank-you-lp .cms-content ol.no-bullet,.container-beta-thank-you-lp .cms-content ul.no-bullet{padding-left:25px;list-style:none}.container-beta-thank-you-lp .cms-content ol li,.container-beta-thank-you-lp .cms-content ul li{position:relative;font-family:Lato,sans-serif;font-size:16px;line-height:1.5625em;color:#4f4f4f;margin:.5em 0}.container-beta-thank-you-lp .cms-content code,.container-beta-thank-you-lp .cms-content pre{font-family:Inconsolata,monospace;font-size:14px;color:#4f4f4f;padding:.2em .5em .1em;background:#ececec;border-radius:.3em;border:none}.container-beta-thank-you-lp .cms-content pre{padding:10px 20px}.container-beta-thank-you-lp .cms-content pre code{padding:0}.container-beta-thank-you-lp .cms-content code{display:inline-block}.background-component{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50%;background-repeat:no-repeat;background-size:cover}.background-component.rainbowwave{background-image:url(/images/background/blue-wave-with-blue.svg)}.anchor{position:relative;top:-138px;display:block;visibility:hidden}.horizontal-spacing.right-small-2x{margin-right:10px}@media (max-width:600px){.horizontal-spacing.right-small-2x{margin-right:5px}}.horizontal-spacing.right-small-x{margin-right:20px}@media (max-width:600px){.horizontal-spacing.right-small-x{margin-right:10px}}.horizontal-spacing.right-small{margin-right:40px}@media (max-width:600px){.horizontal-spacing.right-small{margin-right:20px}}.horizontal-spacing.right-medium{margin-right:60px}@media (max-width:600px){.horizontal-spacing.right-medium{margin-right:30px}}.horizontal-spacing.right-large{margin-right:80px}@media (max-width:600px){.horizontal-spacing.right-large{margin-right:40px}}.horizontal-spacing.right-large-x{margin-right:120px}@media (max-width:600px){.horizontal-spacing.right-large-x{margin-right:60px}}.horizontal-spacing.right-large-2x{margin-right:160px}@media (max-width:600px){.horizontal-spacing.right-large-2x{margin-right:80px}}.horizontal-spacing.left-small-2x{margin-left:10px}@media (max-width:600px){.horizontal-spacing.left-small-2x{margin-left:5px}}.horizontal-spacing.left-small-x{margin-left:20px}@media (max-width:600px){.horizontal-spacing.left-small-x{margin-left:10px}}.horizontal-spacing.left-small{margin-left:40px}@media (max-width:600px){.horizontal-spacing.left-small{margin-left:20px}}.horizontal-spacing.left-medium{margin-left:60px}@media (max-width:600px){.horizontal-spacing.left-medium{margin-left:30px}}.horizontal-spacing.left-large{margin-left:80px}@media (max-width:600px){.horizontal-spacing.left-large{margin-left:40px}}.horizontal-spacing.left-large-x{margin-left:120px}@media (max-width:600px){.horizontal-spacing.left-large-x{margin-left:60px}}.horizontal-spacing.left-large-2x{margin-left:160px}@media (max-width:600px){.horizontal-spacing.left-large-2x{margin-left:80px}}@media (max-width:600px){.horizontal-spacing.zero-mobile{margin:0}}@media (max-width:600px){.form-section{order:-1}}.form-section .form-section-inner{display:flex;justify-content:space-around}@media (max-width:600px){.form-section .form-section-inner{padding:0}}@media (max-width:860px){.form-section .form-section-inner .content{display:none}}.form-section .form-section-inner .content .info{max-width:480px}.form-section .form-section-inner .content .content{max-width:420px}@media (max-width:600px){.form-section .form-section-inner .content .content{width:100%}}.form-section .form-section-inner .form-section-card{align-self:flex-start}.icon-rainbow-ring{position:relative;width:135px;height:55px}.icon-rainbow-ring .background{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:100%}.icon-rainbow-ring .background .ring{height:100%}.icon-rainbow-ring .icon-wrapper{display:flex;justify-content:center;align-items:center;height:100%;opacity:.9999}.icon-rainbow-ring .icon-wrapper .icon{font-size:18px;color:#333}.profile-avatar{position:relative;margin:0 auto}.profile-avatar.large{width:220px;height:220px}@media (max-width:600px){.profile-avatar.large{width:110px;height:110px}}.profile-avatar.small{width:130px;height:130px}@media (max-width:600px){.profile-avatar.small{width:80px;height:80px}}.profile-avatar.small .profile-img{width:92.5%;height:92.5%}.profile-avatar:hover .circle{-webkit-transform:rotate(270deg)!important;transform:rotate(270deg)!important;stroke-dashoffset:0!important}.profile-avatar .profile-img{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:94%;height:94%;border-radius:50%}.profile-avatar .ring{width:100%;height:100%}.profile-avatar .ring .circle{-webkit-transition:1s ease;transition:1s ease}.quote-block{font-size:1em;font-style:italic;line-height:1.5em}.quote-block .first-quotation{position:relative;top:23px;right:6px;font-family:Lato,sans-serif;font-size:3em}.profile-block{font-family:Lato,sans-serif;line-height:1.5em;text-align:center;color:#4f4f4f;margin:20px}.profile-block.width-small{max-width:278px}.profile-block.width-large{max-width:420px}.profile-block .profile-info{margin-top:20px;margin-bottom:20px}.profile-block .profile-info .profile-name{font-size:1.125rem;font-weight:700}.profile-block .profile-info .profile-title{font-size:1rem;font-weight:400;margin-bottom:10px}.profile-block .profile-info .profile-social{display:flex;justify-content:center}.profile-block .profile-info .profile-social .social-link{color:#4f4f4f;margin:6px;font-size:22px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.profile-block .profile-info .profile-social .social-link:hover{color:#333}.profile-blocks{display:flex;flex-wrap:wrap;justify-content:center}.container-ebook-lp{font-family:Lato,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;margin-top:-80px}.container-ebook-lp .subtitle-red{font-size:18px;font-weight:900;text-transform:uppercase;color:#cf3b5b;letter-spacing:.1em}@media (max-width:860px){.container-ebook-lp .subtitle-red{font-size:16px}}@media (max-width:600px){.container-ebook-lp .subtitle-red{font-size:12px;text-align:center}}.container-ebook-lp .hero-section{position:relative;color:#fff;padding-top:120px;padding-bottom:100px;order:-2}@media (max-width:600px){.container-ebook-lp .hero-section{padding-bottom:50px}}.container-ebook-lp .hero-section .main{opacity:.9999}.container-ebook-lp .hero-section .main .main-inner{display:flex;justify-content:space-around}@media (max-width:600px){.container-ebook-lp .hero-section .main .main-inner{flex-direction:column}}.container-ebook-lp .hero-section .main .main-inner .content{max-width:580px;margin-right:20px;margin-top:40px}@media (max-width:600px){.container-ebook-lp .hero-section .main .main-inner .content{margin-right:0;margin-top:0}}@media (max-width:600px){.container-ebook-lp .hero-section .main .main-inner .content .cta{display:none}}.container-ebook-lp .hero-section .image-wrapper{height:440px;display:flex}@media (max-width:860px){.container-ebook-lp .hero-section .image-wrapper{height:380px}}@media (max-width:600px){.container-ebook-lp .hero-section .image-wrapper{height:180px;justify-content:center}}.container-ebook-lp .hero-section .image-wrapper .image{height:100%}.container-ebook-lp .highlights-section{margin-top:-20px;padding-bottom:80px;opacity:.9999}@media (max-width:600px){.container-ebook-lp .highlights-section{margin-top:40px;padding-bottom:40px}}.container-ebook-lp .highlights-section .intro .subheader-2{text-align:center}@media (max-width:600px){.container-ebook-lp .highlights-section .intro .subheader-2{font-size:18px}}.container-ebook-lp .authors-section .author-profiles{display:flex}.container-ebook-lp .form-section .image{width:100%}@media (max-width:600px){.container-ebook-lp .hr{display:none}}.featureblock-small{font-family:Lato,sans-serif;color:#4f4f4f;max-width:280px}.featureblock-small:last-child{margin-right:0}.featureblock-small .icon-wrapper{font-size:28px;color:#47b9e8}@media (max-width:600px){.featureblock-small .icon-wrapper{text-align:center}}.featureblock-small .title{font-size:18px;font-weight:700;line-height:1.5625}@media (max-width:600px){.featureblock-small .title{text-align:center}}.feature-block-smalls{display:flex;justify-content:flex-start;flex-wrap:wrap}@media (max-width:600px){.feature-block-smalls{justify-content:center}}.list-item .inner{display:flex}.list-item .inner .bullet-wrapper{display:flex;align-items:center;margin-right:5px;flex-shrink:0}.list-item .inner .bullet-wrapper .bullet-default{border-radius:50%}.typography-special{font-family:Lato,sans-serif;color:#4f4f4f;margin:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.typography-special.align-center{text-align:center;margin:0 auto}@media (max-width:600px){.typography-special.align-center-mobile{text-align:center;margin:0 auto}}.typography-special.on-dark{color:#fff}.typography-special.shadow{text-shadow:0 1px 6px rgba(0,0,0,.5)}.typography-special.quote1{font-size:24px;font-weight:700;font-style:italic;line-height:36px}.typography-special.subtitle{font-size:20px;line-height:24px}@media (max-width:600px){.typography-special.subtitle{line-height:26px}}.typography-special.code1{font-family:Inconsolata,monospace;font-size:16px;line-height:24px}@media (max-width:600px){.typography-special.code1{font-size:18px}}.typography-special.code2{font-family:Inconsolata,monospace;font-size:14px;line-height:20px}@media (max-width:600px){.typography-special.code2{font-size:16px;line-height:22px}}.typography-special.annotation{font-size:12px;line-height:16px}@media (max-width:600px){.typography-special.annotation{font-size:14px;line-height:20px}}.typography-special.label1{font-size:14px;font-weight:700;line-height:16px}@media (max-width:600px){.typography-special.label1{font-size:15px;line-height:20px}}.typography-special.label2{font-size:12px;font-weight:700;line-height:16px;letter-spacing:.04em;text-transform:uppercase}@media (max-width:600px){.typography-special.label2{font-size:12px;line-height:18px}}.typography-special.tag{font-size:12px;font-weight:700;line-height:16px}@media (max-width:600px){.typography-special.tag{font-size:14px;line-height:18px}}.unordered-list{padding:0;list-style:none}.image-wrapper-webinar-series{position:relative}.image-wrapper-webinar-series.nw{margin-top:33px}.image-wrapper-webinar-series.nw .image-wrapper{top:0;left:0}.image-wrapper-webinar-series.nw .dot-bg{right:0;bottom:0}.image-wrapper-webinar-series.nw .icon-wrapper{top:-33px;left:33px}.image-wrapper-webinar-series.ne{margin-top:33px}.image-wrapper-webinar-series.ne .image-wrapper{top:0;right:0}.image-wrapper-webinar-series.ne .dot-bg{bottom:0;left:0}.image-wrapper-webinar-series.ne .icon-wrapper{top:-33px;right:33px}.image-wrapper-webinar-series.se{margin-bottom:33px}.image-wrapper-webinar-series.se .image-wrapper{right:0;bottom:0}.image-wrapper-webinar-series.se .dot-bg{top:0;left:0}.image-wrapper-webinar-series.se .icon-wrapper{right:33px;bottom:-33px}.image-wrapper-webinar-series.sw{margin-bottom:33px}.image-wrapper-webinar-series.sw .image-wrapper{bottom:0;left:0}.image-wrapper-webinar-series.sw .dot-bg{top:0;right:0}.image-wrapper-webinar-series.sw .icon-wrapper{bottom:-33px;left:33px}.image-wrapper-webinar-series .image-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;width:89%;max-height:84.5%;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.25);overflow:hidden}.image-wrapper-webinar-series .image-wrapper .image{width:100%;height:auto}.image-wrapper-webinar-series .dot-bg{position:absolute}.image-wrapper-webinar-series .icon-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;font-size:28px;color:#fff;width:66px;height:66px;border-radius:50%;box-shadow:0 10px 50px rgba(0,0,0,.4)}.webinar-series-block{display:flex}.webinar-series-block.content-left .content{margin-right:40px;order:-1}.webinar-series-block.content-left .image-container{margin-right:0}.webinar-series-block .image-container{max-width:450px;margin-right:40px}.webinar-series-block .image-container .image-mobile{align-self:flex-start;width:100%;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.25)}.webinar-series-block .content{max-width:500px}@media (max-width:860px){.webinar-series-block .content{text-align:center}}.webinar-series-block .content .series-meta{display:flex;flex-wrap:wrap}@media (max-width:860px){.webinar-series-block .content .series-meta{flex-direction:column}}@media (max-width:860px){.webinar-series-block .content .series-meta .divider,.webinar-series-block .cta{display:none}}@media (max-width:860px){.webinar-series-block{flex-direction:column;align-items:center}.webinar-series-block .image-container{margin-bottom:40px;margin-right:0}.webinar-series-block.content-left .content{margin-right:0;order:1}}.container-webinar-series-lp{display:flex;flex-direction:column}.container-webinar-series-lp .hero-section{order:-2}.container-webinar-series-lp .hero-section .content-max-width{max-width:820px}.container-webinar-series-lp .highlights-section{position:relative;margin-top:-60px}.container-webinar-series-lp .highlights-section .main-wrapper{display:flex}@media (max-width:860px){.container-webinar-series-lp .highlights-section .main-wrapper{flex-direction:column}}.container-webinar-series-lp .highlights-section .main-wrapper .content{max-width:530px}.container-webinar-series-lp .highlights-section .main-wrapper .image-wrapper{max-width:520px}.container-webinar-series-lp .highlights-section .main-wrapper .image-wrapper .image{width:100%}.container-webinar-series-lp .series-section .series-block{display:flex}.container-webinar-series-lp .series-section .series-block.content-left .content{margin-right:40px;order:-1}.container-webinar-series-lp .series-section .series-block.content-left .image-container{margin-right:0}.container-webinar-series-lp .series-section .series-block .image-container{max-width:450px;margin-right:40px}.container-webinar-series-lp .series-section .series-block .image-container .image-mobile{align-self:flex-start;width:100%;border-radius:4px;box-shadow:0 10px 20px rgba(0,0,0,.25)}.container-webinar-series-lp .series-section .series-block .content{max-width:500px}@media (max-width:860px){.container-webinar-series-lp .series-section .series-block .content{text-align:center}}.container-webinar-series-lp .series-section .series-block .content .series-meta{display:flex;flex-wrap:wrap}@media (max-width:860px){.container-webinar-series-lp .series-section .series-block .content .series-meta{flex-direction:column}}@media (max-width:860px){.container-webinar-series-lp .series-section .series-block .content .series-meta .divider,.container-webinar-series-lp .series-section .series-block .cta{display:none}}@media (max-width:860px){.container-webinar-series-lp .series-section .series-block{flex-direction:column;align-items:center}.container-webinar-series-lp .series-section .series-block .image-container{margin-bottom:40px;margin-right:0}.container-webinar-series-lp .series-section .series-block.content-left .content{margin-right:0;order:1}}.container-event-layout{font-family:Lato,sans-serif;color:#4f4f4f;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container-event-layout .about-section{padding-bottom:0}.container-event-layout .about-section .title{font-size:45px;font-weight:300;margin-top:0;margin-bottom:20px}@media (max-width:600px){.container-event-layout .about-section .title{font-size:36px;text-align:center}}.container-event-layout .footer-section{background:#131b43}.container-event-layout .section-title{font-size:45px;font-weight:300;margin-top:0;margin-bottom:20px}@media (max-width:600px){.container-event-layout .section-title{font-size:36px;text-align:center}}.container-event-layout .section-content{font-size:18px;line-height:1.5625em;text-align:left}.container-event-layout .section-content h1,.container-event-layout .section-content h2{font-family:Lato,sans-serif;font-size:22px;font-weight:700;line-height:1.5625em;text-align:left;margin-top:0;margin-bottom:10px}.container-event-layout .section-content h3,.container-event-layout .section-content h4,.container-event-layout .section-content h5,.container-event-layout .section-content h6{font-family:Lato,sans-serif;font-size:18px;font-weight:700;line-height:1.5625em;text-align:left;margin-top:0;margin-bottom:10px}@media (max-width:600px){.container-event-layout .section-content h3,.container-event-layout .section-content h4,.container-event-layout .section-content h5,.container-event-layout .section-content h6{font-size:16px}}.container-event-layout .section-content p{font-family:Lato,sans-serif;font-size:18px;line-height:1.5625em;text-align:left;margin:0}@media (max-width:600px){.container-event-layout .section-content p{font-size:16px}}.container-event-layout .section-content ol,.container-event-layout .section-content ul{padding-left:20px;margin:0}.container-event-layout .section-content ol.no-bullet,.container-event-layout .section-content ul.no-bullet{padding-left:25px;list-style:none}.container-event-layout .section-content ol li,.container-event-layout .section-content ul li{position:relative;font-family:Lato,sans-serif;font-size:18px;line-height:1.5625em;margin:.5em 0}@media (max-width:600px){.container-event-layout .section-content ol li,.container-event-layout .section-content ul li{font-size:16px}}.container-event-layout .section-content ol li .svg-inline--fa,.container-event-layout .section-content ul li .svg-inline--fa{position:absolute;top:7px;left:-25px;font-size:14px}.container-event-layout .section-content ol li .svg-inline--fa.fa-code-branch,.container-event-layout .section-content ul li .svg-inline--fa.fa-code-branch{left:-20px}.container-event-layout .section-content ol li .svg-inline--fa.fa-bolt,.container-event-layout .section-content ul li .svg-inline--fa.fa-bolt{left:-21px}.container-event-layout .section-content code{display:inline-block;font-family:Inconsolata,monospace;font-size:16px;padding:.2em .5em .1em;background:#ececec;border-radius:.3em}.container-event-layout .section-content.dark code,.container-event-layout .section-content.dark pre{background:#00223a;color:#f2f2f2}.container-event-layout .section-content.dark pre{border:1px solid #4f4f4f}.input-checkbox{position:relative}.input-checkbox>label.checkbox-label{display:block;font-size:12px;color:#4f4f4f;padding-left:28px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.input-checkbox>label.checkbox-label:after,.input-checkbox>label.checkbox-label:before{position:absolute;left:0;content:""}.input-checkbox>label.checkbox-label:before{top:calc(50% - 8px);width:16px;height:16px;background:#f4f4f4;border:1px solid #bdbdbd;border-radius:2px;-webkit-transition:background .3s;transition:background .3s;cursor:pointer}.input-checkbox>label.checkbox-label:hover:before{background-color:#fff;border-color:#08b}.input-checkbox input[type=checkbox]{position:absolute;top:calc(50% - 8px);margin:0;opacity:0;outline:none}.input-checkbox input[type=checkbox]:focus+label:before{background-color:#fff;border-color:#08b}.input-checkbox input[type=checkbox]:checked+label:before{background:#08b;border:1px solid #08b}.input-checkbox input[type=checkbox]:checked+label:after{top:calc(50% - 4px);left:4px;width:8px;height:5px;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);border-color:#fff;border-style:none none solid solid;border-width:2px}.event-fixed-mobile-cta{position:fixed;bottom:0;left:0;z-index:900;display:none;justify-content:space-between;visibility:visible;font-family:Lato,sans-serif;width:100vw;padding:13px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.25);-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out;opacity:1;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (max-width:600px){.event-fixed-mobile-cta{display:flex}}.event-fixed-mobile-cta.is-hidden{visibility:hidden;opacity:0}.event-fixed-mobile-cta .left{display:flex;align-items:center;margin-right:15px}.event-fixed-mobile-cta .left .logo{padding-right:13px}.event-fixed-mobile-cta .left .content{font-size:10px;line-height:1.3}.event-fixed-mobile-cta .left .content .title{font-size:14px;font-weight:700}.event-fixed-mobile-cta .form-link{align-self:center;margin:0}.google-map{width:100%;height:100%}.google-map .map-marker{color:#d5322f;font-size:36px;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.event-location-section{position:relative;font-size:18px;line-height:1.5;background-color:#f2f2f2}.event-location-section .info-container{position:relative;display:flex}@media (max-width:600px){.event-location-section .info-container{flex-direction:column;padding-bottom:0}}.event-location-section .info-container .info,.event-location-section .info-container .map-placeholder{flex:1 1}.event-location-section .info-container .info .info-inner{margin-right:40px}.event-location-section .info-container .info .info-inner .address{margin-bottom:40px}.event-location-section .info-container .info .info-inner .address p{margin:0}.event-location-section .info-container .info .info-inner .address .name{font-weight:700}.event-location-section .info-container .map-placeholder{min-height:300px;pointer-events:none}.event-location-section .map-container{position:absolute;top:0;right:0;width:50%;height:100%;background:#bdbdbd}@media (max-width:600px){.event-location-section .map-container{top:unset;bottom:0;width:100%;height:300px}}.event-hero{position:relative;padding-top:190px;margin-bottom:-60px;font-family:Lato,sans-serif;margin-top:-80px}@media (max-width:600px){.event-hero{padding-top:80px;margin-top:0}}.event-hero.overlay-card{margin-bottom:0}.event-hero.overlay-card .hero-card{z-index:1;padding-bottom:60px}@media (max-width:600px){.event-hero.overlay-card .hero-card{padding-bottom:140px}}.event-hero.align-right .hero-card{margin-right:0;margin-left:auto}.event-hero .background{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:50%}.event-hero .background .overlay{width:100%;height:100%;background-color:#131b43;opacity:0;mix-blend-mode:multiply}@media (max-width:600px){.event-hero .background .overlay{opacity:.85}}.event-hero .hero-card{position:relative;color:#fff;max-width:480px;padding:3.125em 4.5em 240px;background-color:rgba(19,27,67,.9);border-radius:8px}@media (max-width:860px){.event-hero .hero-card{padding-bottom:190px}}@media (max-width:600px){.event-hero .hero-card{text-align:center;max-width:100%;padding-right:0;padding-bottom:140px;padding-left:0;background-color:transparent}}.event-hero .hero-card .title{font-size:65px;font-weight:700;margin-top:0;margin-bottom:20px}@media (max-width:600px){.event-hero .hero-card .title{font-size:45px}}.event-hero .hero-card .info{font-size:24px;font-weight:300;line-height:1.5}@media (max-width:600px){.event-hero .hero-card .info{font-size:18px;font-weight:400}}.event-hero .hero-card .info .date{margin-bottom:1em}.event-hero .hero-card .info .location-address p{margin:0}.event-hero .hero-card .info .cta-link-wrapper{display:flex;margin:40px 0 0}@media (max-width:600px){.event-hero .hero-card .info .cta-link-wrapper{justify-content:center}}.event-overview.img-right .container-lg{justify-content:space-between}.event-overview.img-right .container-lg .img-wrapper{order:2;margin-right:0}.event-overview.img-right .container-lg .content{order:1;margin-right:40px}.event-overview .container-lg{display:flex}@media (max-width:600px){.event-overview .container-lg{flex-direction:column}}.event-overview .container-lg .img-wrapper{min-width:480px;max-width:480px;margin-right:40px}@media (max-width:940px){.event-overview .container-lg .img-wrapper{min-width:340px;max-width:340px}}@media (max-width:780px){.event-overview .container-lg .img-wrapper{min-width:200px;max-width:200px}}@media (max-width:600px){.event-overview .container-lg .img-wrapper{order:2;margin-right:0;min-width:100%;max-width:100%}}.event-overview .container-lg .img-wrapper .img{width:100%;height:auto;border-radius:8px}@media (max-width:600px){.event-overview .container-lg .content{order:1;margin-bottom:40px}}.add-to-calendar .button{display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:#08b}.add-to-calendar .button .icon{margin-right:.5em}.add-to-calendar .dropdown{position:absolute;background:#fff;border:1px solid #bdbdbd;border-radius:.25em;z-index:800;overflow:hidden;padding:.625em 0;margin-top:.625em;box-shadow:0 1px 6px rgba(0,0,0,.12)}.add-to-calendar .dropdown .dropdown-option{display:block;color:#4f4f4f;padding:.625em 1.125em;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}.add-to-calendar .dropdown .dropdown-option:hover{background:#f6f6f6}.event-agenda .session{position:relative;padding:30px;margin-bottom:30px;border:1px solid #e6e6e6;border-radius:8px;-webkit-transition:.15s ease-in-out;transition:.15s ease-in-out}@media (max-width:600px){.event-agenda .session{padding:0}}.event-agenda .session:hover{box-shadow:0 1px 6px rgba(0,0,0,.12)}.event-agenda .session .main{display:flex;align-items:center}@media (max-width:600px){.event-agenda .session .main{flex-direction:column;align-items:flex-start}}.event-agenda .session .main .image{width:100%;max-width:95px;height:95px;margin-right:60px;margin-left:20px;border-radius:50%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}@media (max-width:600px){.event-agenda .session .main .image{display:none}}.event-agenda .session .main .info{font-size:14px;line-height:1.5}@media (max-width:600px){.event-agenda .session .main .info{padding:20px}}.event-agenda .session .main .info .header-section .title{font-size:18px;font-weight:900}.event-agenda .session .main .info .header-section .subtitle{font-size:16px}.event-agenda .session .main .info .summary{margin:14px 0}.event-agenda .session .main .info .datetime{font-weight:700}.event-agenda .session .main .info .location{font-weight:700;color:#828282}.event-agenda .session .main .info .location .icon{margin-right:.5em}.event-agenda .session .add-to-cal-wrapper{display:flex;justify-content:flex-end}@media (max-width:600px){.event-agenda .session .add-to-cal-wrapper{padding:0 20px 20px;justify-content:flex-start}}.color-text-white{color:#fff!important}.color-text-emperor{color:#4f4f4f!important}.container-event-main-lp .section.prizes .images{display:flex;flex-wrap:wrap;margin-top:40px}@media (max-width:600px){.container-event-main-lp .section.prizes .images{justify-content:space-around}}.container-event-main-lp .section.prizes .images .image{width:240px;height:240px;margin-right:40px;margin-bottom:40px;border-radius:8px;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}@media (max-width:600px){.container-event-main-lp .section.prizes .images .image{width:170px;height:170px;margin-right:20px;margin-left:20px}}.container-event-main-lp .section.happy-hour{color:#fff;background-color:#131b43;background-size:cover;background-image:url(/images/events/bg-happy-hour.svg)}@media (max-width:600px){.container-event-main-lp .section.happy-hour{padding-bottom:0}}.container-event-main-lp .section.happy-hour .main{display:flex}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main{flex-direction:column}}.container-event-main-lp .section.happy-hour .main .image{flex:0.4 1;min-height:180px;margin-right:40px;background-size:cover;background-position:50%;border-radius:8px;background-repeat:no-repeat}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .image{order:1;width:calc(100% + 60px);margin-right:0;margin-left:-30px;border-radius:0}}.container-event-main-lp .section.happy-hour .main .info{display:flex;flex-direction:column;flex:0.6 1;font-size:18px;line-height:1.5;padding-bottom:60px}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .info{padding-bottom:40px}}.container-event-main-lp .section.happy-hour .main .info .section-content{margin-bottom:40px}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .info .section-content{order:2;margin-bottom:0}}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .info .logistics{order:1;margin-bottom:20px}}.container-event-main-lp .section.happy-hour .main .info .logistics .location-name{font-size:24px;font-weight:700;margin-bottom:10px}.container-event-main-lp .section.happy-hour .main .info .logistics .address p{margin:0}.container-event-main-lp .section.happy-hour .main .btn-wrapper{margin-top:30px}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .btn-wrapper{order:3}}.container-event-main-lp .section.happy-hour .main .btn-wrapper .btn{margin-left:0}@media (max-width:600px){.container-event-main-lp .section.happy-hour .main .btn-wrapper .btn{margin:0}}.container-event-main-lp .section.ad-banner .main{display:flex;justify-content:center;align-items:center}@media (max-width:600px){.container-event-main-lp .section.ad-banner .main{flex-direction:column}}.container-event-main-lp .section.ad-banner .main .image{max-width:310px;max-height:210px;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:60px;border-radius:8px}@media (max-width:600px){.container-event-main-lp .section.ad-banner .main .image{max-width:100%;margin-right:0;margin-bottom:20px}}.container-event-main-lp .section.ad-banner .main .info{display:flex;flex-direction:column;justify-content:center;line-height:1.5625}.container-event-main-lp .section.ad-banner .main .info .date{font-size:28px}@media (max-width:600px){.container-event-main-lp .section.ad-banner .main .info .date{font-size:24px}}.container-event-main-lp .section.ad-banner .main .info .location{font-size:18px}

For reference I am using a forked version of gatsby-plugin-netlify-cms. After rebasing my fork on top of v4.1.6 changes, previews no longer work in development regardless whether I use netlify-cms or netlify-cms-app.

The only differences between my fork and the official are

erquhart commented 5 years ago

Note that you're registering a URL - Netlify CMS injects a link with it's href set to cms.css into the head of the preview pane iframe. It sounds like there's no file named cms.css available during development (that HTML you're getting is more than likely the 404 page), probably because Gatsby is adding a hash after the filename so it's cms-a6fe32.css or something.

That said, gatsby-plugin-netlify-cms is specifically designed so that you don't need to register styles, it automatically injects all of your site styles into the preview pane iframe. Is that not happening for you? And if not, can you help me reproduce? If your repo is public just point me there.

vai0 commented 5 years ago

Ah gotcha. Unfortunately our repo is private. But my forked version of gatsby-plugin-netlify-cms is public, and I'm free to share files I think may be relevant here... .e.g, here's our custom cms.js. Let me know what else I can do to help.

import CMS from "netlify-cms";

import "typeface-lato";
import "typeface-inconsolata";
import "scss/global.scss";

import StandardLandingPagePreview from "cms/preview-templates/StandardLandingPagePreview";
import StandardThankYouPagePreview from "cms/preview-templates/StandardThankYouPagePreview";
import BetaThankYouPagePreview from "cms/preview-templates/BetaThankYouPagePreview";
import EbookLandingPagePreview from "cms/preview-templates/EbookLandingPagePreview";
import WebinarSeriesLandingPagePreview from "cms/preview-templates/WebinarSeriesLandingPagePreview";
import EventMainLandingPagePreview from "cms/preview-templates/EventMainLandingPagePreview";
import EventHappyHourLandingPagePreview from "cms/preview-templates/EventHappyHourLandingPagePreview";
import EventActivityLandingPagePreview from "cms/preview-templates/EventActivityLandingPagePreview";
import EventRoadshowLandingPagePreview from "cms/preview-templates/EventRoadshowLandingPagePreview";

// The following window and global config settings below were taken from here.
// https://github.com/gatsbyjs/gatsby/blob/master/docs/docs/visual-testing-with-storybook.md
// They're required because the netlify-cms runs on a separate webpack config,
// and outside of Gatsby. This ensures any Gatsby components imported into the
// CMS works without errors

// highlight-start
// Gatsby's Link overrides:
// Gatsby defines a global called ___loader to prevent its method calls from creating console errors you override it here
global.___loader = {
    enqueue: () => {},
    hovering: () => {},
};

// Gatsby internal mocking to prevent unnecessary errors
global.__PATH_PREFIX__ = "";

// This is to utilized to override the window.___navigate method Gatsby defines and uses to report what path a Link would be taking us to
window.___navigate = pathname => {
    alert(`This would navigate to: https://www.memsql.com${pathname}`);
};

CMS.registerPreviewTemplate("lp-standard", StandardLandingPagePreview);
CMS.registerPreviewTemplate("lp-ebook", EbookLandingPagePreview);
CMS.registerPreviewTemplate(
    "lp-webinar-series",
    WebinarSeriesLandingPagePreview
);
CMS.registerPreviewTemplate("content", StandardLandingPagePreview);
CMS.registerPreviewTemplate("content-syndication", StandardLandingPagePreview);
CMS.registerPreviewTemplate("programmatic", StandardLandingPagePreview);
CMS.registerPreviewTemplate("sponsored-webcast", StandardLandingPagePreview);
CMS.registerPreviewTemplate("webcast", StandardLandingPagePreview);
CMS.registerPreviewTemplate("web-forms", StandardLandingPagePreview);
CMS.registerPreviewTemplate("other", StandardLandingPagePreview);
CMS.registerPreviewTemplate("lp-thank-you", StandardThankYouPagePreview);
CMS.registerPreviewTemplate("lp-beta-thank-you", BetaThankYouPagePreview);
CMS.registerPreviewTemplate("lp-event-main", EventMainLandingPagePreview);
CMS.registerPreviewTemplate(
    "lp-event-happy-hour",
    EventHappyHourLandingPagePreview
);
CMS.registerPreviewTemplate(
    "lp-event-activity",
    EventActivityLandingPagePreview
);
CMS.registerPreviewTemplate(
    "lp-event-roadshow",
    EventRoadshowLandingPagePreview
);
erquhart commented 5 years ago

So gatsby-plugin-netlify-cms is using this file as an entry point in a dedicated webpack build, and all css/scss files imported through this entry point get injected to your preview pane. Is that not happening? If there are missing styles, it may just be a matter of importing those styles here.

vai0 commented 5 years ago

The styles are not being imported in development, but they are just fine post-build.

The cms.js above lives in src/cms/cms.js in our Gatsby project.

gatsby-config.js

{
    resolve: "gatsby-plugin-netlify-cms",
    htmlTitle: "Bifrost Content Manager",
    options: {
        enableIdentityWidget: false,
        modulePath: `${__dirname}/src/cms/cms.js`,
        htmlTitle: "Bifrost Admin",
        resolvePaths: [path.resolve("./src")],
    },
},

Can you clarify what the difference is between the cms.js in the gatsby-plugin-netlify-cms and our custom cms.js? If we have our own cms.js, does it simply override the existing gatsby-plugin-netlify-cms's cms.js?

erquhart commented 5 years ago

Yep, your module overrides the default one.

Just checked this out locally and looks like our plugin is busted - its injecting styles direct to the CMS itself, and also seeing the 404 for some styles too. I'll look into this more in the am.

vai0 commented 4 years ago

@erquhart hm... not sure why yet. if a diff is done between v4.1.6 and the fork - the differences are the additional babel loaders (seemed like the built-in gatsby preset babel loader wasn't reading React.Fragment syntax?), the resolvePaths option, and netlify-cms instead of netlify-cms-app.

vai0 commented 4 years ago

As another update, not sure if this helps at all - but I've noticed it accesses the cms.css stylesheet at localhost:9000/admin/cms.css, which is redirecting me to a gatsby development 404 page.

Whereas after building gatsby - I do indeed see cms.css being available at the /admin/ dir, which explains why the styles work fine post-build.

So it does seem like in development, cms.css is not being generated at all. I'm not familiar enough with webpack to determine which configuration causing this only in dev. Any ideas?

Here's the forked plugin's gatsby-node.js

import path from "path"
import { mapValues, isPlainObject, trim } from "lodash"
import webpack from "webpack"
import HtmlWebpackPlugin from "html-webpack-plugin"
import HtmlWebpackExcludeAssetsPlugin from "html-webpack-exclude-assets-plugin"
import MiniCssExtractPlugin from "mini-css-extract-plugin"
// TODO: swap back when https://github.com/geowarin/friendly-errors-webpack-plugin/pull/86 lands
import FriendlyErrorsPlugin from "@pieh/friendly-errors-webpack-plugin"

// Deep mapping function for plain objects and arrays. Allows any value,
// including an object or array, to be transformed.
function deepMap(obj, fn) {
  // If the transform function transforms the value, regardless of type, return
  // the transformed value.
  const mapped = fn(obj)
  if (mapped !== obj) {
    return mapped
  }

  // Recursively deep map arrays and plain objects, otherwise return the value.
  if (Array.isArray(obj)) {
    return obj.map(value => deepMap(value, fn))
  }
  if (isPlainObject(obj)) {
    return mapValues(obj, value => deepMap(value, fn))
  }
  return obj
}

function replaceRule(value) {
  // If `value` does not have a `test` property, it isn't a rule object.
  if (!value || !value.test) {
    return value
  }

  // remove dependency rule
  if (
    value.type === `javascript/auto` &&
    value.use &&
    value.use[0] &&
    value.use[0].options &&
    value.use[0].options.presets &&
    /babel-preset-gatsby[/\\]dependencies\.js/.test(
      value.use[0].options.presets
    )
  ) {
    return null
  }

  // Manually swap `style-loader` for `MiniCssExtractPlugin.loader`.
  // `style-loader` is only used in development, and doesn't allow us to pass
  // the `styles` entry css path to Netlify CMS.
  if (
    typeof value.loader === `string` &&
    value.loader.includes(`style-loader`)
  ) {
    return {
      ...value,
      loader: MiniCssExtractPlugin.loader,
    }
  }

  return value
}

exports.onPreInit = ({ reporter }) => {
  try {
    require.resolve(`netlify-cms`)
    reporter.warn(
      `The netlify-cms package is deprecated, please install netlify-cms-app instead. You can do this by running "npm install netlify-cms-app"`
    )
  } catch (err) {
    // carry on
  }
}

exports.onCreateDevServer = ({ app, store }, { publicPath = `admin` }) => {
  const { program } = store.getState()
  const publicPathClean = trim(publicPath, `/`)
  app.get(`/${publicPathClean}`, function(req, res) {
    res.sendFile(
      path.join(program.directory, `public`, publicPathClean, `index.html`),
      err => {
        if (err) {
          res.status(500).end(err.message)
        }
      }
    )
  })
}

exports.onCreateWebpackConfig = (
  { store, stage, getConfig, plugins, pathPrefix, loaders },
  {
    modulePath,
    publicPath = `admin`,
    enableIdentityWidget = true,
    htmlTitle = `Content Manager`,
    htmlFavicon = ``,
    manualInit = false,
    resolvePaths = [],
  }
) => {
  if (![`develop`, `build-javascript`].includes(stage)) {
    return Promise.resolve()
  }
  const gatsbyConfig = getConfig()
  const { program } = store.getState()
  const publicPathClean = trim(publicPath, `/`)
  const config = {
    ...gatsbyConfig,
    entry: {
      cms: [
        manualInit && `${__dirname}/cms-manual-init.js`,
        `${__dirname}/cms.js`,
        enableIdentityWidget && `${__dirname}/cms-identity.js`,
      ]
        .concat(modulePath)
        .filter(p => p),
    },
    output: {
      path: path.join(program.directory, `public`, publicPathClean),
    },
    resolve: {
      modules: [...resolvePaths, `node_modules`]
    },
    module: {
      rules: deepMap(gatsbyConfig.module.rules, replaceRule).filter(Boolean),
    },
    plugins: [
      // Remove plugins that either attempt to process the core Netlify CMS
      // application, or that we want to replace with our own instance.
      ...gatsbyConfig.plugins.filter(
        plugin =>
          ![`MiniCssExtractPlugin`, `GatsbyWebpackStatsExtractor`].find(
            pluginName =>
              plugin.constructor && plugin.constructor.name === pluginName
          )
      ),

      /**
       * Provide a custom message for Netlify CMS compilation success.
       */
      stage === `develop` &&
        new FriendlyErrorsPlugin({
          clearConsole: false,
          compilationSuccessInfo: {
            messages: [
              `Netlify CMS is running at ${program.ssl ? `https` : `http`}://${
                program.host
              }:${program.port}/${publicPathClean}/`,
            ],
          },
        }),

      // Use a simple filename with no hash so we can access from source by
      // path.
      new MiniCssExtractPlugin({
        filename: `[name].css`,
      }),

      // Auto generate CMS index.html page.
      new HtmlWebpackPlugin({
        title: htmlTitle,
        favicon: htmlFavicon,
        chunks: [`cms`],
        excludeAssets: [/cms.css/],
      }),

      // Exclude CSS from index.html, as any imported styles are assumed to be
      // targeting the editor preview pane. Uses `excludeAssets` option from
      // `HtmlWebpackPlugin` config.
      new HtmlWebpackExcludeAssetsPlugin(),

      // Pass in needed Gatsby config values.
      new webpack.DefinePlugin({
        __PATH__PREFIX__: pathPrefix,
        CMS_PUBLIC_PATH: JSON.stringify(publicPath),
      }),
    ].filter(p => p),

    // Remove common chunks style optimizations from Gatsby's default
    // config, they cause issues for our pre-bundled code.
    mode: stage === `develop` ? `development` : `production`,
    optimization: {
      // Without this, node can get out of memory errors when building for
      // production.
      minimizer: stage === `develop` ? [] : gatsbyConfig.optimization.minimizer,
    },
    devtool: false,
  }

  config.module.rules.push({
    test: /gatsby\/cache-dir.*\.js$/,
    loader: require.resolve(`babel-loader`),
    options: {
      presets: [
        require.resolve(`@babel/preset-react`),
        [
          require.resolve(`@babel/preset-env`),
          {
            shippedProposals: true,
            useBuiltIns: `entry`,
            corejs: 2
          }
        ]
      ],
      plugins: [
        require.resolve(`@babel/plugin-proposal-class-properties`),
        require.resolve(`babel-plugin-remove-graphql-queries`)
      ]
    }
  })

  config.module.rules.exclude = [/node_modules\/(?!(gatsby)\/)/]

  return new Promise((resolve, reject) => {
    if (stage === `develop`) {
      webpack(config).watch({}, () => {})

      return resolve()
    }

    return webpack(config).run((err, stats) => {
      if (err) return reject(err)
      const errors = stats.compilation.errors || []
      if (errors.length > 0) return reject(stats.compilation.errors)
      return resolve()
    })
  })
}
vai0 commented 4 years ago

@erquhart @sidharthachatterjee

Here's a link to a minimal repo that reproduces this issue: https://github.com/vai0/g-netlify-cms-test

What I noticed was that the issue only occurs in gatsby develop before gatsby build is run, or when the .cache/ and public/ are removed and gatsby develop is run with a clean slate. It seems like gatsby develop isn't creating and referencing it's own version of the cms.css - which explains why my previews only worked post-build, and not in development.

Here's what I went through to replicate the issue:

  1. Run gatsby develop and visit http://localhost:8000/admin/#/collections/test_template/entries/sample

    No styles are applied dev-before-build

  2. Stop the dev server, run gatsby build, then run gatsby server, then visit the statically rendered dashboard: http://localhost:9000/admin/#/collections/test_template/entries/sample

    Styles are picked up and applied build

  3. Stop the server, then run gatsby develop, and visit the dev dashboard at visit http://localhost:8000/admin/#/collections/test_template/entries/sample

    Styles are now being picked up in development dev-after-build

  4. To prove that the dev server is picking up the cms.css statically built from gatsby build, run gatsby clean, then rerun gatsby develop, and refresh the dashboard again - and as we can see, it's back to being unstyled. dev-before-build

Here's the cms.css response when the previews are unstyled:

<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="ie=edge"/><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/><title data-react-helmet="true"></title><link rel="shortcut icon" href="/icons/icon-48x48.png?v=008654519ce705ac7bc44303a9014606"/><link rel="manifest" href="/manifest.webmanifest"/><meta name="theme-color" content="#663399"/><link rel="apple-touch-icon" sizes="48x48" href="/icons/icon-48x48.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="72x72" href="/icons/icon-72x72.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="96x96" href="/icons/icon-96x96.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="144x144" href="/icons/icon-144x144.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192x192.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="256x256" href="/icons/icon-256x256.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="384x384" href="/icons/icon-384x384.png?v=008654519ce705ac7bc44303a9014606"/><link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512x512.png?v=008654519ce705ac7bc44303a9014606"/><script src="/socket.io/socket.io.js"></script></head><body><noscript id="gatsby-noscript">This app works best with JavaScript enabled.</noscript><div id="___gatsby"></div><script src="/commons.js"></script></body></html>

and when it is styled:

.test-template{font-family:sans-serif;max-width:1000px;margin:0 auto;padding:100px}.test-template .title{font-size:48px;font-weight:700;color:#00f;margin-bottom:40px}.test-template .subtitle{font-size:24px;font-weight:700;color:green;margin-bottom:40px}.test-template .summary{font-size:16px;color:#639}
vai0 commented 4 years ago

@erquhart @sidharthachatterjee have a reproducable repo up ^. Let me know what I can do to further help debug

gatsbot[bot] commented 4 years ago

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

vai0 commented 4 years ago

Can we label as not not stale?

erquhart commented 4 years ago

Hey @vai0, haven't forgotten about this.

@erezrokah this will probably be worth considering while working on #18245, as both may be helped by changing how we work with Webpack from the plugin.

erezrokah commented 4 years ago

I did some digging. The css file is not extracted for development builds.

There are two current issues with the plugin affecting it:

  1. The code here: https://github.com/erezrokah/gatsby/blob/0b96c79bf894fb604d66ce8240298e38f55fff1b/packages/gatsby-plugin-netlify-cms/src/gatsby-node.js#L55 doesn't handle rules in the following format:
rules: [
        {
          test: /\.less$/,
          use: [
            loaders.miniCssExtract(),
            loaders.css({ importLoaders: 1 }),
            loaders.postcss(),
            `less-loader`,
          ],
        },
      ],
  1. The MiniCssExtractPlugin should not be used in development builds: https://github.com/webpack-contrib/mini-css-extract-plugin/tree/50434b55c9df9cd3c26f2243e23df83e2964c720#advanced-configuration-example. I figured this out after fixing issue number 1 and getting compilation errors while running gatsby develop
entr commented 4 years ago

@erezrokah I had a look at your solution. It walks injected link tags and registers them as preview styles but they are still left in parent context and can easily collide with styles of the cms itself.

I tried using the MiniCssExtractPlugin.loader loader in development too and it works just fine with my setup using the { hmr: true } option.

erezrokah commented 4 years ago

Thanks @entr, let me have another look then

erezrokah commented 4 years ago

@entr can you share your setup as a comment to this issue? setting { hmr: true } in the plugin is not that straightforward as it requires modifying existing Gatsby rules (and user configured rules).

entr commented 4 years ago

@erezrokah I did a PR #20589

Let me know what you think. Thanks

kylesloper commented 3 years ago

Hi, I'm experiencing the same problems as you are except I use eleventy as my ssg. Could you summarize how you fixed this?