/** Branding colors */
/** Reset some basic elements */
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }

/** Basic styling */
body { font-family: "Source Sans Pro", sans-serif; font-size: 16px; line-height: 1.5rem; font-weight: 400; color: #555; background-color: #f5f5f5; }

html, body { font-size: 16px; height: 100%; }

/** Set `margin-bottom` to maintain vertical rhythm */
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }

/** Images */
img { max-width: 100%; vertical-align: middle; }

/** Figures */
figure > img { display: block; }

figcaption { font-size: 14px; }

/** Lists */
ul, ol { margin-left: 30px; }

li > ul, li > ol { margin-bottom: 0; }

/** Headings */
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin-bottom: 2rem; color: #555; }

h2 { font-size: 2.125rem; }

/** Links */
a { color: #0277bd; text-decoration: none; }

a code { color: #0277bd; }

a:hover { color: #00AFE4; text-decoration: underline; }

a:hover code { color: #00AFE4; text-decoration: underline; }

/** Blockquotes */
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }

blockquote > :last-child { margin-bottom: 0; }

/** Code formatting */
code, pre code { font-family: 'Source Code Pro', monospace; font-size: 1rem; color: #555555; background-color: #f5f5f5; border-radius: 2px; padding: 2px 4px; }

pre code { padding: 0; white-space: pre; }

kbd { color: #fff; font-family: 'Source Sans Pro', monospace; background-color: #757575; font-size: 1rem; border-radius: 2px; padding: 2px 4px; }

/** Icons */
.icon > svg { display: inline-block; width: 16px; height: 16px; vertical-align: middle; }

.icon > svg path { fill: #828282; }

ol li img { margin: 8px 0; }

pre.highlight { background: #f5f5f5; }

pre { padding: 9px 14px; position: relative; }

code.language-copypaste { white-space: pre-wrap; display: inline-block; padding-right: 64px; }

button.btn.btn--clipboard { position: absolute; top: 0; right: 0; z-index: 10; display: block; color: #767676; cursor: pointer; background-color: #fff; border: 1px solid #e1e1e8; border-radius: 0 4px 0 4px; border-top: none; border-right: none; min-width: 0; }

button.btn.btn--clipboard:hover { background: #014358; color: #ffffff; }

.search-input { border-radius: 4px; border: 1px solid #e5e5e5; padding-left: 8px; padding-right: 8px; width: 240px; }

main { padding-top: 0; padding-bottom: 0; background-color: #f5f5f5; }

main > section { position: relative; padding: 2rem 0; background-color: #F5F5F5; }

/** Part of footer hack **/
.site-wrapper { position: relative; min-height: 100%; }

/*************************/
.topics-list, .collection-page-list { margin-bottom: 3.5rem; font-size: 1.25rem; line-height: 2.125rem; }

/** Page content */
.page-content { padding: 30px 0; }

.page-heading { font-size: 20px; }

.post-list { margin-left: 0; list-style: none; }

.post-list > li { margin-bottom: 30px; }

.post-meta { font-size: 14px; color: #828282; }

.post-link { display: block; font-size: 24px; }

/** Posts */
.post-header { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid #e5e5e5; }

.post-title { font-size: 2.125rem; letter-spacing: -1px; line-height: 1; margin: 0; }

.post-content > * { margin: 2rem 0; }

.post-content p { line-height: 1.75rem; }

.post-content p:last-child { margin-bottom: 0; }

.post-content ul, .post-content ol { margin-left: 30px; }

.post-content h2 { font-size: 32px; }

.post-content h3 { font-size: 26px; }

.post-content h4 { font-size: 20px; }

.flash-message { margin: 1em 0 0px; padding: 15px 20px; border-radius: 5; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { main { /** Part of footer hack **/ padding-bottom: 128px; /* Height of the footer element */ } main > *:first-child { /** 8rem , 4 for header and 4 by default **/ padding-top: 10rem; } main > section { padding: 6rem 0; } }

/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */
.center { text-align: center; }

.three-fourths-size { width: 75%; }

.card { background: #fff; padding: 32px 128px 32px 32px; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2) !important; }

.page-top-navigation .page-top-navigation-content { display: flex; margin-top: 8px; margin-bottom: 8px; padding: 0; justify-content: space-between; }

.page-top-navigation .page-top-navigation-content .breadcrumb-navigation .breadcrumb-list { margin: 0; padding: 0; }

.page-top-navigation .page-top-navigation-content .breadcrumb-navigation .breadcrumb-list .breadcrumb-list-item { display: inline-block; list-style-type: none; }

.page-top-navigation .page-top-navigation-content .breadcrumb-navigation .breadcrumb-list .breadcrumb-list-item:not(:last-child) { margin-right: 8px; }

.page-top-navigation .page-top-navigation-content .breadcrumb-navigation .breadcrumb-list .breadcrumb-list-item:not(:last-child)::after { content: "/"; margin-left: 8px; }

.home-search-container { margin-bottom: 8px; padding: 0; display: flex; flex-direction: row-reverse; }

/** Syntax highlighting styles */
.highlight { background: #fff; }

.highlight .c { color: #998; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .k { font-weight: bold; }

.highlight .o { font-weight: bold; }

.highlight .cm { color: #998; font-style: italic; }

.highlight .cp { color: #999; font-weight: bold; }

.highlight .c1 { color: #998; font-style: italic; }

.highlight .cs { color: #999; font-weight: bold; font-style: italic; }

.highlight .gd { color: #000; background-color: #fdd; }

.highlight .gd .x { color: #000; background-color: #faa; }

.highlight .ge { font-style: italic; }

.highlight .gr { color: #a00; }

.highlight .gh { color: #999; }

.highlight .gi { color: #000; background-color: #dfd; }

.highlight .gi .x { color: #000; background-color: #afa; }

.highlight .go { color: #888; }

.highlight .gp { color: #555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaa; }

.highlight .gt { color: #a00; }

.highlight .kc { font-weight: bold; }

.highlight .kd { font-weight: bold; }

.highlight .kp { font-weight: bold; }

.highlight .kr { font-weight: bold; }

.highlight .kt { color: #458; font-weight: bold; }

.highlight .m { color: #099; }

.highlight .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #458; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #900; font-weight: bold; }

.highlight .nf { color: #900; font-weight: bold; }

.highlight .nn { color: #555; }

.highlight .nt { color: #000080; }

.highlight .nv { color: #008080; }

.highlight .ow { font-weight: bold; }

.highlight .w { color: #bbb; }

.highlight .mf { color: #099; }

.highlight .mh { color: #099; }

.highlight .mi { color: #099; }

.highlight .mo { color: #099; }

.highlight .sb { color: #d14; }

.highlight .sc { color: #d14; }

.highlight .sd { color: #d14; }

.highlight .s2 { color: #d14; }

.highlight .se { color: #d14; }

.highlight .sh { color: #d14; }

.highlight .si { color: #d14; }

.highlight .sx { color: #d14; }

.highlight .sr { color: #009926; }

.highlight .s1 { color: #d14; }

.highlight .ss { color: #990073; }

.highlight .bp { color: #999; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .il { color: #099; }

/* ========================================================================== Helper classes ========================================================================== */
/* Clearfix: contain floats For modern browsers 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class. 2. The use of `table` rather than `block` is only necessary if using `:before` to contain the top-margins of child elements. */
.clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ }

.clearfix:after { clear: both; }

/* For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */
.clearfix { *zoom: 1; }

/* Include this class to an element whose children you want to vertically align */
.center-vertical::before, .center-vertical-children::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: 0; }

.center-vertical > *, .center-vertical-children > * { display: inline-block; vertical-align: middle; }

/* Contrary to center-vertical, include this class to an element you want to vertically align, given the parent element has a specified height. */
.center-vertical-self { position: relative; display: block; top: 50%; transform: translateY(-50%); }

/* Borrowing some material CSS for prettier, fuller shadows in elements such as pin buttons, modals, etc https://elements.polymer-project.org/elements/paper-material?active=paper-material&view=demo:demo/index.html */
.paper-material { transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1); }

.paper-material[data-elevation="1"] { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); }

.paper-material[data-elevation="2"] { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); }

.paper-material[data-elevation="3"] { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); }

.paper-material[data-elevation="4"] { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4); }

.paper-material[data-elevation="5"] { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4); }

/* Button base rules We use the BEM naming convention (See https://en.bem.info/method/naming-convention/) Base font size is 16px so 1rem == 16px */
.button, .btn, button { display: inline-block; position: relative; cursor: pointer !important; overflow: hidden; vertical-align: middle; border-width: 1px; border-style: solid; border-color: transparent; border-radius: 2px; /* Since we want to achieve 32px height, with 16px as base font-size, and excluding 2px from the top and bottom borders, that gives us (30 - 2)/16 = 1.875, which translates to 30px height, which when adding the 2px from top and bottom borders back gives a final 32px height */ line-height: 1.875rem; /* 30px */ min-width: 5.5rem; /* 88px */ color: #78909C; font-size: .875rem; /* 14px */ font-weight: 400; font-family: 'Source Sans Pro', 'Helvetica','Arial', sans-serif; text-decoration: none; text-align: center; letter-spacing: 0; margin: 0; padding: 0 1rem; /* 0 16px */ background-position: 0 0; background-color: transparent; background-image: none; white-space: nowrap; box-shadow: none; text-shadow: none; }

.button:focus, .btn:focus, button:focus { color: #78909C; }

.btn:active, button:active { outline: none; }

.btn.btn--2x, button.btn--2x { font-size: 1.25rem; /* 20px */ min-width: 9.375rem; /* 150px */ line-height: 2.875rem; /* 46px for a 48px total with borders */ padding: 0 2rem; /* 0 32px */ font-weight: 500; }

/* Green button */
.btn.btn--cta, button.btn--cta { color: #fff; background-color: #44B78B; border-color: #40AD84; }

.btn.btn--cta:focus, button.btn--cta:focus { color: #fff; }

.btn.btn--cta:hover, button.btn--cta:hover { color: #fff; background-color: #44B78B; border-color: #36916E; }

.btn.btn--cta:active, button.btn--cta:active { color: #fff; background-color: #3A9E78; }

/* Blue button */
.btn.btn--primary, button.btn--primary { color: #fff; background-color: #026282; border-color: #025975; }

.btn.btn--primary:focus, button.btn--primary:focus { color: #fff; }

.btn.btn--primary:hover, button.btn--primary:hover { color: #fff; background-color: #026282; border-color: #023A4C; }

.btn.btn--primary:active, button.btn--primary:active { color: #fff; background-color: #024359; }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Base font-size is 16px, 1rem == 16px */
header { background: #014358; width: 100%; z-index: 20; font-size: .875rem; /* 14px */ font-weight: 400; top: 0; border-bottom: none; box-shadow: none; }

header.page-home.paper-material[data-elevation="2"], .use-case-page header.paper-material[data-elevation="2"] { box-shadow: none !important; }

.paper-material[data-elevation="2"] { box-shadow: none; }

.fixed { position: relative; }

header .logo-container, header .text-container { height: 4rem; }

.logo-link { max-width: 300px; margin: 0 auto; }

#navigation { background-color: white; z-index: 0; clear: both; border-bottom: 1px solid #e5e5e5; }

#navigation li { margin: 0 0 0 1.2rem; display: inline-block; }

#navigation li:last-child { margin-right: 0; }

#navigation li:first-child { margin-left: 0; }

#navigation li:not(.not-visual-link) a { color: #014358; position: relative; line-height: 2rem; }

#navigation li:not(.not-visual-link) a:hover { color: #2ba6cb; }

#topLogin .signup.button { position: relative; }

#topLogin .signup { display: none; }

#topLogin.scrolled .signup, .page-blog #topLogin .signup, .page-company #topLogin .signup, .page-login #topLogin .signup, .page-tos #topLogin .signup, .page-privacy #topLogin .signup, .page-features-django #topLogin .signup, .page-features #topLogin .signup { display: inline-block; }

#topLogin.scrolled .login, .page-blog #topLogin .login, .page-company #topLogin .login, .page-login #topLogin .login, .page-tos #topLogin .login, .page-privacy #topLogin .login, .page-features-django #topLogin .login, .page-features #topLogin .login { display: none; }

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { .fixed { position: fixed; } .paper-material[data-elevation="2"] { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4); } .logo-link { max-width: none; /*         margin: initial; */ } #navigation { background-color: transparent; clear: none; border-bottom: none; } #navigation li { margin: 0 1.2rem 0 1.2rem; } #navigation li:not(.not-visual-link) a { color: #FFF; opacity: .8; } #navigation li:not(.not-visual-link) a:hover { color: #FFF; } #navigation li:not(.not-visual-link) a:hover, #navigation li.active a { opacity: 1; } }

/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */
footer { position: relative; z-index: 0; font-size: 1rem; font-weight: 400; border-top: 1px solid #e5e5e5; }

#disclaimer { background: #014358; color: #FFF; position: relative; }

footer .logo-container, footer .text-container { height: 8rem; }

footer .logo-container { max-width: 300px; margin: 0 auto; }

footer .pull-right { clear: both; float: none !important; }

footer .text-container { height: 4rem; text-align: center; font-size: .8rem; padding: 0 0.9375rem; }

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { footer { position: absolute; bottom: 0; width: 100%; z-index: 3; } footer .pull-right { clear: none; float: right !important; } footer .text-container { height: 8rem; } }

/* Medium devices (desktops, 992px and up) */
/* Large devices (large desktops, 1200px and up) */

/*# sourceMappingURL=main.css.map */