@import url(fontawesome.min.css); @import url(brands.min.css); /** * Reset * normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ @import url(monokai.css); html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, figcaption, figure, footer, header, main, nav, section { display: block; } summary { display: list-item; } figure { margin: 0; } pre, code, kbd, samp { font-family: Monaco, courier, monospace; font-size: 1em; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; -webkit-text-decoration-skip: objects; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border: 0; vertical-align: middle; } svg:not(:root) { overflow: hidden; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } button, input, optgroup, select, textarea { font: inherit; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } [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; } textarea { overflow: auto; } optgroup { font-weight: bold; } progress { display: inline-block; vertical-align: baseline; } table { border-collapse: collapse; border-spacing: 0; } /** * General */ html { font-family: "Lato", Helvetica, Arial, sans-serif; font-size: 100%; } body { background: #f7f9fb; color: #424b5f; line-height: 1.75; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } a { border-bottom: 1px solid currentColor; color: #12db5d; text-decoration: none; -webkit-transition: .3s ease; transition: .3s ease; } a:hover, a:focus { color: #424b5f; } h1, h2, h3, h4, h5, h6 { color: #283040; font-weight: bold; line-height: 1.2; margin: 2.25rem 0 1.125rem; text-rendering: optimizeLegibility; } h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } h1 { font-size: 2.5em; } h2 { font-size: 2.125em; } h3 { font-size: 1.875em; } h4 { font-size: 1.5em; } h5 { font-size: 1.25em; } h6 { font-size: 1.125em; } p { margin: 0 0 1.875em; } address { font-style: italic; margin: 0 0 1.875em; } mark, ins { background: #fff7e6; color: #283040; padding: 0 3px; text-decoration: none; } pre { background: #f7f9fb; border-radius: 3px; color: #283040; font-family: Monaco, courier, monospace; font-size: 0.875rem; line-height: 1.5; margin: 0 0 1.875rem; overflow: auto; padding: 1.5rem; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; } :not(pre) > code { background: #f7f9fb; border-radius: 3px; font-size: 0.875rem; padding: 0.1em; white-space: normal; } blockquote { border-left: 5px solid #12db5d; font-size: 1.5em; line-height: 1.33333; margin: 1.5em 0; padding-left: 1em; } blockquote:first-child { margin-top: 0; } blockquote p { margin-bottom: 0.5em; } blockquote p:last-child { margin-bottom: 0; } blockquote small, blockquote cite { color: #67758d; display: block; font-size: 0.75em; font-style: normal; font-weight: normal; line-height: 1.5; margin-top: 1em; } blockquote small:last-child, blockquote cite:last-child { margin-bottom: 0; } dl { margin: 0; } dt { font-weight: bold; } dd { margin: 0 0 1.875em; } ul, ol { margin: 0 0 1.875em; padding: 0 0 0 1.5em; } li > ul, li > ol { margin-bottom: 0; } hr { border: 0; border-bottom: 1px solid #dee5ef; margin: 1.875em 0; } table { line-height: 1.5; margin: 0; max-width: 100%; text-align: left; width: 100%; } caption { color: #67758d; font-size: 0.875rem; font-style: normal; margin-bottom: 0.75rem; text-align: left; } th, td { border-bottom: 1px solid #dee5ef; padding: 0.5em 5px; } th { color: #283040; font-weight: bold; } .responsive-table { display: block; margin: 0 0 1.875em; overflow-x: auto; width: 100%; } :not(.responsive-table) > table { display: block; margin: 0 0 1.875em; overflow-x: auto; -webkit-overflow-scrolling: touch; } :not(.responsive-table) > table tbody, :not(.responsive-table) > table thead { width: 100%; } :not(.responsive-table) > table tr { width: 100%; } :not(.responsive-table) > table td { min-width: 140px; } /* Form fields */ label { color: #283040; font-weight: bold; line-height: 1.5; margin-bottom: 0.25em; } input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; padding-left: 0.25em; padding-right: 1em; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], select, textarea { background: #fff; border: 1px solid #dee5ef; border-radius: 3px; box-shadow: none; box-sizing: border-box; color: #424b5f; display: block; font-size: 16px; font-weight: normal; line-height: 1.5; max-width: 100%; padding: 0.5em 15px; width: 100%; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="url"]:focus, select:focus, textarea:focus { outline: 0; } .form-group { margin-bottom: 1em; } .form-submit { margin-top: 1.66667em; } /* Buttons */ button, input[type="submit"], input[type="button"], input[type="reset"], .button { background-color: #12db5d; border: 2px solid #12db5d; border-radius: 3px; box-sizing: border-box; color: #fff; display: inline-block; font-size: 14px; font-weight: bold; letter-spacing: 0.035em; line-height: 1.2; padding: 0.8em 2.75em; text-align: center; text-decoration: none; -webkit-transition: .3s ease; transition: .3s ease; vertical-align: middle; } button:hover, button:focus, button:active, input[type="submit"]:hover, input[type="submit"]:focus, input[type="submit"]:active, input[type="button"]:hover, input[type="button"]:focus, input[type="button"]:active, input[type="reset"]:hover, input[type="reset"]:focus, input[type="reset"]:active, .button:hover, .button:focus, .button:active { background-color: transparent; color: #12db5d; outline: 0; } .button-secondary { background-color: transparent; color: #12db5d; } .button-secondary:hover, .button-secondary:focus, .button-secondary:active { background-color: #12db5d; color: #fff; } .button-icon { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: 0; border: 0; color: inherit; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 1em; font-weight: normal; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; letter-spacing: normal; padding: 0.25em 0; } .button-icon .icon { height: 1em; min-width: 1em; text-align: center; } .button-icon:hover, .button-icon:focus, .button-icon:active { color: #12db5d; } .has-gradient .button { background-color: #fff; border-color: #fff; color: #12db5d; } .has-gradient .button:hover, .has-gradient .button:focus, .has-gradient .button:active { background-color: transparent; color: #fff; } .has-gradient .button-secondary { background-color: transparent; color: #fff; } .has-gradient .button-secondary:hover, .has-gradient .button-secondary:focus, .has-gradient .button-secondary:active { background-color: #fff; color: #12db5d; } #menu-open, #menu-close, .guides-nav .guides-nav-toggle, .guides-nav .submenu-toggle { background: 0; border: 0; border-radius: 0; box-shadow: none; color: inherit; height: 30px; padding: 0; position: relative; width: 30px; } /* Placeholder text color */ ::-webkit-input-placeholder { color: #67758d; } ::-moz-placeholder { color: #67758d; opacity: 1; } :-ms-input-placeholder { color: #67758d; } ::-ms-input-placeholder { color: #67758d; } ::placeholder { color: #67758d; } /* Videos, audios and embeds */ embed, iframe, object, video { max-width: 100%; } .js-reframe { margin: 0 0 1.875em; } /* Images */ img { height: auto; max-width: 100%; } /* Examples */ .example-container { background: #424b5f; box-shadow: 5px 5px 5px #999; padding: 20px; margin: 20px 0; } .example-container::before { content: 'Example'; color: #ffffff; font-size: 1.2em; text-transform: uppercase; } .example-container :nth-child(1) { margin-top: 10px; } .example-container .result { content: 'Result'; color: #ffffff; font-size: 1.2em; text-transform: uppercase; margin-bottom: 1em; } .example-container pre { margin: 0; } /* Notifications */ .alert { border-radius: 5px; color: #283040; margin-bottom: 1.875em; padding: 1em 1.125em; } .alert.note { background: #fff7e6; border-left: 5px solid #fcb41d; } .alert.success { background: #bffad5; border-left: 5px solid #12db5d; } .alert.danger { background: #ffe9e6; border-left: 5px solid #fc381d; } .alert.warning { background: #fff7e6; border-left: 5px solid #fcb41d; } .alert.info { background: #eaf5ff; border-left: 5px solid #1E90FF; } .important { background: #ffe9e6; border-left: 5px solid #fc381d; border-radius: 5px; color: #283040; margin-bottom: 1.875em; padding: 1em 1.125em; } /* Background gradient */ .has-gradient { background: #12db5d; background: -webkit-linear-gradient(left, #11998e, #12db5d); background: linear-gradient(to right, #11998e, #12db5d); color: #fff; position: relative; } /* Background Image */ .bg-img { -webkit-animation: fadeIn20 .75s ease-in-out; animation: fadeIn20 .75s ease-in-out; background-position: center; background-size: cover; bottom: 0; left: 0; opacity: 0.2; position: absolute; right: 0; top: 0; } /* Heading decoration */ .line-left { position: relative; } .line-left:before { background: #12db5d; content: ""; height: 100%; left: -1px; position: absolute; top: 0; width: 5px; } /* Grid */ .grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -0.9375em; margin-right: -0.9375em; } .grid-item { box-sizing: border-box; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding-left: 0.9375em; padding-right: 0.9375em; } .grid-col-2 .grid-item { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .grid-col-3 .grid-item { -ms-flex-preferred-size: 33.333%; flex-basis: 33.333%; max-width: 33.333%; } .grid-swap { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .grid-middle { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .grid-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } /* Text meant only for screen readers */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; } /* Clearing floats */ .post-content:after { clear: both; } .post-content:before, .post-content:after { content: ""; display: table; } @media only screen and (max-width: 1000px) { .grid { margin-left: -1.5vw; margin-right: -1.5vw; } .grid-item { padding-left: 1.5vw; padding-right: 1.5vw; } } @media only screen and (max-width: 760px) { .grid-col-3 .grid-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } @media only screen and (max-width: 640px) { h1, h2, h3, h4, h5, h6 { margin: 1.875rem 0 0.9375rem; } h1 { font-size: 2em; } h2 { font-size: 1.75em; } h3 { font-size: 1.5em; } h4 { font-size: 1.25em; } h5 { font-size: 1.125em; } h6 { font-size: 1em; } blockquote { font-size: 1.25em; line-height: 1.5; } .grid-col-2 .grid-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; } } /** * Custom Icons */ .icon-menu, .icon-close { background: currentColor; border-radius: 1px; color: inherit; height: 2px; margin-top: -1px; margin-left: -12px; position: absolute; right: 0; top: 50%; width: 24px; } .icon-menu:before, .icon-menu:after, .icon-close:before, .icon-close:after { background: currentColor; border-radius: 1px; content: ""; height: 100%; left: 0; position: absolute; width: 100%; } .icon-menu:before { top: -6px; } .icon-menu:after { bottom: -6px; } .icon-close { background: 0; margin-left: -15px; width: 30px; } .icon-close:before { top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .icon-close:after { top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .icon-angle-right { background: 0; border-color: currentColor; border-style: solid; border-width: 1px 1px 0 0; box-sizing: border-box; height: 8px; left: 50%; margin-left: -4px; margin-top: -4px; position: absolute; top: 50%; width: 8px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .guides-nav-toggle .icon-angle-right { height: 12px; left: auto; margin-left: 0; margin-right: 9px; margin-top: -6px; right: 0; width: 12px; } .guides-section-item .icon-angle-right { left: auto; margin-left: 0; margin-right: 15px; right: 0; } /** * Animations */ @-webkit-keyframes fadeIn20 { 0% { opacity: 0; } 100% { opacity: 0.2; } } @keyframes fadeIn20 { 0% { opacity: 0; } 100% { opacity: 0.2; } } /** * Structure */ .outer { padding-left: 3vw; padding-right: 3vw; } .inner { margin-left: auto; margin-right: auto; max-width: 1200px; } .inner-md { margin-left: auto; margin-right: auto; max-width: 800px; } .inner-sm { margin-left: auto; margin-right: auto; max-width: 680px; } .site { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; position: relative; } .site-content { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; width: 100%; } /** * Site Header */ .site-header { background: #fff; padding-bottom: 1.25em; padding-top: 1.125em; } .site-header-inside { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .site-branding { -webkit-box-flex: 0; -ms-flex: 0 1 auto; flex: 0 1 auto; } .site-branding a { border: 0; color: inherit; display: inline-block; } .site-title { color: #283040; font-size: 1.75rem; font-weight: bold; line-height: 1.2; margin: 0; } .site-logo { margin: 0; } .site-logo img { max-height: 36px; } .site-navigation { margin-left: auto; } .menu, .submenu { list-style: none; margin: 0; padding: 0; } .menu-item { position: relative; } .menu-item.current-menu-item { color: #12db5d; } .menu-item a:not(.button) { border: 0; color: inherit; display: inline-block; font-size: 14px; line-height: 1.5; } .menu-item a:not(.button):hover { color: #12db5d; } .menu-toggle { display: none; } @media only screen and (min-width: 801px) { .menu { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; } .menu-item { margin-left: 20px; padding-bottom: 0.1875em; padding-top: 0.1875em; } .menu-item a { padding-bottom: 0.5em; padding-top: 0.5em; } .menu-item a.button:not(.button-icon) { padding-left: 1.25em; padding-right: 1.25em; } .menu-item.has-children > a { padding-right: 15px; position: relative; } .menu-item.has-children > a:after { background: 0; border-color: currentColor; border-style: solid; border-width: 1px 1px 0 0; box-sizing: border-box; content: ""; height: 6px; position: absolute; right: 0; top: 50%; width: 6px; -webkit-transform: translateY(-50%) rotate(135deg); transform: translateY(-50%) rotate(135deg); } .menu-item.has-children > a.button:not(.button-icon) { padding-right: 2.25em; } .menu-item.has-children > a.button:not(.button-icon):after { right: 1.25em; } .submenu { background: #fff; border: 1px solid #dee5ef; border-radius: 3px; left: 0; min-width: 180px; opacity: 0; padding: 0.75em 0; position: absolute; text-align: left; top: 100%; -webkit-transition: opacity .2s, visibility 0s .2s; transition: opacity .2s, visibility 0s .2s; visibility: hidden; width: 100%; z-index: 99; } .menu-item .submenu-toggle { display: none; } .menu-item.has-children:hover > .submenu { opacity: 1; -webkit-transition: margin .3s, opacity .2s; transition: margin .3s, opacity .2s; visibility: visible; } .submenu .menu-item { display: block; margin: 0; padding: 0 15px; } .submenu a:not(.button-icon) { display: block; } .submenu a.button:not(.button-icon) { margin: 0.5em 0; } } @media only screen and (max-width: 800px) { .site { overflow: hidden; position: relative; } .site-branding { margin-right: 10px; } .site-header:after { background: rgba(66, 75, 95, 0.6); content: ""; height: 100vh; left: 0; opacity: 0; position: absolute; top: 0; -webkit-transition: opacity .15s ease-in-out,visibility 0s ease-in-out .15s; transition: opacity .15s ease-in-out,visibility 0s ease-in-out .15s; visibility: hidden; width: 100%; z-index: 998; } #menu-open { display: block; margin-left: auto; } .site-navigation { background: #fff; box-sizing: border-box; height: 100vh; margin: 0; max-width: 360px; -webkit-overflow-scrolling: touch; position: absolute; right: -100%; top: 0; -webkit-transition: right .3s ease-in-out, visibility 0s .3s ease-in-out; transition: right .3s ease-in-out, visibility 0s .3s ease-in-out; visibility: hidden; width: 100%; z-index: 999; } .site-nav-inside { height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; position: relative; } .menu--opened .site { height: 100%; left: 0; overflow: hidden; position: fixed; top: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); width: 100%; z-index: 997; } .menu--opened .site-navigation { right: 0; -webkit-transition: right .3s ease-in-out; transition: right .3s ease-in-out; visibility: visible; } .menu--opened .site-header:after { opacity: 1; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: visible; } #menu-close { display: block; position: absolute; right: 3vw; top: 1.125rem; } .menu { padding: 4.5rem 3vw 3rem; } .submenu { border-top: 1px solid #dee5ef; display: none; padding-left: 15px; } .submenu.active { display: block; } .menu-item { border-top: 1px solid #dee5ef; display: block; margin: 0; } .menu-item:not(.menu-button):last-child { border-bottom: 1px solid #dee5ef; } .menu-item a:not(.button), .menu-item a.button-icon { padding: 1em 0; } .menu-item a:not(.button-icon) { display: block; } .menu-item.has-children > a { margin-right: 30px; } .menu-item .menu-item:first-child { border-top: 0; } .menu-item .menu-item:last-child { border-bottom: 0; } .menu-item .submenu-toggle { background: 0; border: 0; border-radius: 0; color: #67758d; display: block; height: 48px; padding: 0; position: absolute; right: 0; top: 0; width: 30px; } .menu-item .submenu-toggle.active .icon-angle-right { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .menu-button > .button:not(.button-icon) { margin-bottom: 1em; margin-top: 1em; } .menu-button + .menu-button { border-top: 0; } } /** * Posts and Pages */ .post { margin-bottom: 2.5em; } .post-full:last-child { margin-bottom: 5em; } .page-header, .post-full .post-header { color: #fff; padding-bottom: 9.5em; padding-top: 3.75em; position: relative; text-align: center; } .page-header .inner-sm, .post-full .post-header .inner-sm { position: relative; } .page-title, .post-full .post-title { color: inherit; font-size: 3em; margin: 0; position: relative; } .page-subtitle, .post-subtitle { font-size: 1.25em; line-height: 1.5; margin: 0.5em 0 0; position: relative; } .post-title a { border: 0; color: inherit; } .post-title a:hover { color: #67758d; } .post-meta { color: #67758d; font-size: 0.875em; margin: 0 0 0.5em; } .post-thumbnail { border: 0; border-radius: 5px 5px 0 0; display: block; margin: 0; } .post-thumbnail img { border-radius: 5px 5px 0 0; width: 100%; } .post-full .post-content, .post-feed { margin-top: -5em; position: relative; } .post-full .post-content, .post-feed .post { background: #fff; border: 1px solid #dee5ef; border-radius: 5px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); } .post-full .post-content { padding: 2.5em 7%; } .post-full .post-meta { color: inherit; font-size: 1.125rem; } .post-feed:last-child { margin-bottom: 5em; } .post-feed .post { padding: 0 0 2.5em; } .post-feed .post-header { margin: 0 0 1.25em; padding-top: 1.875em; } .post-feed .post-meta, .post-feed .post-title, .post-feed .post-excerpt, .post-feed .read-more { padding-left: 7%; padding-right: 7%; } .post-feed .post-title { font-size: 1.5em; margin: 0; } .post-feed .post-excerpt { margin-bottom: 1.125em; } .post-feed .read-more { margin: 0; } .post-feed .read-more-link { border: 0; color: #12db5d; } .post-feed .read-more-link:after { font-size: 1.125em; content: "\2192"; line-height: 1.5; margin-left: 5px; } @media only screen and (max-width: 1000px) { .post { margin-bottom: 3vw; } } @media only screen and (max-width: 640px) { .page-title, .post-full .post-title { font-size: 2.25rem; } .post-full .post-content, .post-feed .post-meta, .post-feed .post-title, .post-feed .post-excerpt, .post-feed .read-more { padding-left: 1.5rem; padding-right: 1.5rem; } } /** * Docs */ .guides-content { padding-top: 2.5em; } .post.type-guides { margin-bottom: 5.625em; max-width: 800px; } .post.type-guides h1 { font-size: 1.875rem; } .post.type-guides h2 { font-size: 1.5rem; } .post.type-guides h3 { font-size: 1.25rem; } .post.type-guides h4 { font-size: 1.125rem; } .post.type-guides h5, .post.type-guides h6 { font-size: 1rem; } .post.type-guides .hash-link { border: 0; color: #67758d; display: inline-block; margin-left: -21px; opacity: 0; padding-right: 5px; -webkit-transition: opacity .3s ease; transition: opacity .3s ease; } .post.type-guides .hash-link .icon-copy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367758d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-link'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E"); display: inline-block; height: 16px; width: 16px; } .post.type-guides h2:hover .hash-link, .post.type-guides h2:focus .hash-link, .post.type-guides h3:hover .hash-link, .post.type-guides h3:focus .hash-link { opacity: 1; } .post.type-guides .post-inside { background: #fff; border: 1px solid #dee5ef; border-radius: 5px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; padding: 2.5em 0; } .post.type-guides .post-title { font-size: 1.875rem; margin: 0 0 2.5rem; padding: 0 7%; } .post.type-guides .post-content { padding: 0 7%; } .guides-section-items { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; list-style: none; margin-left: -0.3125em; margin-right: -0.3125em; padding: 0; } .guides-section-items .guides-section-item { -webkit-flex: 1 1 240px; -ms-flex: 1 1 240px; flex: 1 1 240px; margin: 0 0.3125em 0.9375em; } .guides-section-items .guides-item-link { border: 1px solid #dee5ef; border-radius: 3px; color: #283040; display: block; font-weight: bold; padding: 0.9375em; position: relative; } .guides-section-items .guides-item-link:hover { border-color: #12db5d; color: #12db5d; } .guides-nav { margin-bottom: 1.875em; } .guides-nav .guides-nav-toggle { color: #283040; font-size: 1.125rem; height: 30px; margin: 0; padding-right: 30px; position: relative; text-align: left; width: 100%; } .guides-nav .submenu-toggle { color: #67758d; height: 30px; position: absolute; right: 0; top: 0; width: 30px; } .guides-toc { color: #283040; font-weight: bold; line-height: 1.5; list-style: none; margin: 0; padding: 0; } .guides-toc > .toc-item > a { padding: 0.1875rem 0; } .guides-toc a { border: 0; color: inherit; display: block; } .guides-toc a:hover, .guides-toc a:focus { color: #12db5d; } .toc-submenu { border-left: 1px solid #dee5ef; color: #424b5f; display: none; font-size: 0.875rem; font-weight: normal; list-style: none; margin-top: 0.625rem; padding-left: 1.25rem; } .toc-item { color: inherit; margin-bottom: 0.625rem; } .toc-item.current, .toc-item.current-parent { color: #12db5d; } .toc-item.has-children { padding-right: 30px; position: relative; } .toc-item.has-children.active .toc-submenu { display: block; } .toc-item.has-children.active > .submenu-toggle .icon-angle-right { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .page-nav { display: none; } .page-nav .page-nav-title { font-size: 1rem; margin: 0 0 0.625rem; } .page-nav .page-nav-title:only-child { display: none; } .page-nav ul { font-size: 0.8125rem; line-height: 1.5; list-style: none; padding: 0; } .page-nav ul ul { border-left: 1px solid #dee5ef; margin-top: 0.625rem; padding-left: 1.25rem; } .page-nav li { margin-bottom: 0.625rem; } .page-nav li.active > a { color: #12db5d; } .page-nav a { color: #424b5f; border: 0; display: block; } .page-nav a:hover, .page-nav a:focus { color: #12db5d; } @media only screen and (min-width: 801px) { .guides-content { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3.75em; } .post.type-guides { -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow: hidden; } .guides-nav, .page-nav { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; margin-bottom: 5.625em; } .guides-nav .sticky, .page-nav .sticky { position: -webkit-sticky; position: sticky; top: 1.875rem; } .guides-nav { padding-right: 1.5em; width: 12.5em; } .page-nav { padding-left: 1.5em; width: 9.5em; } .guides-nav-toggle { display: none; } } @media only screen and (min-width: 1091px) { .page-nav { display: block; } } @media only screen and (max-width: 800px) { .guides-nav { background: #fff; border: 1px solid #dee5ef; border-radius: 5px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); box-sizing: border-box; margin-bottom: 5%; padding: 0.75em 1em; } .guides-toc-wrap { display: none; } .toc--opened .guides-toc-wrap { display: block; } .toc--opened .guides-nav-toggle .icon-angle-right { -webkit-transform: rotate(135deg); transform: rotate(135deg); } .guides-toc { border-top: 1px solid #dee5ef; margin-top: 1.25rem; padding-top: 1.25rem; } } @media only screen and (max-width: 640px) { .post.type-guides .post-title, .post.type-guides .post-content { padding: 0 2.25rem; } } /** * Sections */ .block { padding-top: 3.75em; } .block:not(.block-hero) { background: #f7f9fb; } .block:last-child { padding-bottom: 3.75em; } .block-header { margin-bottom: 1.5em; } .block-title { font-size: 2.125em; margin: 0; } .block-subtitle { color: #67758d; line-height: 1.5; margin-bottom: 0; } .block-subtitle:not(:first-child) { margin-top: 0.5em; } .block-buttons, .grid-item-buttons { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0.9375em; } .block-buttons a, .grid-item-buttons a { margin-bottom: 1em; margin-right: 1em; } .block-buttons a:not(.button) { border: 0; font-weight: bold; } .has-gradient .block-title, .has-gradient .block-subtitle, .has-gradient .block-buttons a:not(.button) { color: inherit; } /* Content section */ .block-text .grid-item:only-child { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 680px; text-align: center; } .block-text .block-content { font-size: 1.125em; } .block-image { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; margin-bottom: 1.875rem; } .block-body { -ms-flex-preferred-size: 50%; flex-basis: 50%; max-width: 50%; } .block-body:only-child .block-buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .block-body:only-child .block-buttons a { margin-left: 0.5em; margin-right: 0.5em; } /* CTA section */ .block-cta .has-gradient { border-radius: 5px; padding: 3.75em 5% 1.875em; } .block-cta .block-header { -ms-flex-preferred-size: 66.666%; flex-basis: 66.666%; max-width: 66.666%; } .block-cta .block-subtitle { font-size: 1.125em; } .block-cta .block-buttons a { margin-left: 0.5em; margin-right: 0.5em; } /* Grid section */ .block-grid:not(.has-header) { background: 0; padding-top: 0; } .block-grid .block-header { margin-bottom: 2em; text-align: center; } .block-grid .block-title { font-size: 1.875rem; } .block-grid .grid-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 1.875em; } .block-grid .grid-item-inside { background: #fff; border: 1px solid #dee5ef; border-radius: 3px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08); -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; padding-bottom: 0.25em; } .grid-item-image { border-radius: 3px 3px 0 0; display: block; width: 100%; } .grid-item-image img { border-radius: 3px 3px 0 0; } .grid-item-title { font-size: 1.5em; margin-bottom: 0.75rem; margin-top: 1.5rem; } .grid-item-title:first-child { margin-top: 1.875rem; } .grid-item-title a { border: 0; color: inherit; } .grid-item-title a:hover, .grid-item-title a:focus { color: #67758d; } .grid-item-content p { margin-bottom: 1.5em; } .grid-item-buttons a:not(.button) { border: 0; } .grid-item-buttons a:not(.button):after { font-size: 1.125em; content: "\2192"; line-height: 1.5; margin-left: 5px; } .grid-item-title, .grid-item-content, .grid-item-buttons { padding-left: 1.875rem; padding-right: 1.875rem; } /* Hero Section */ .block-hero { color: #fff; padding-bottom: 7.5em; padding-top: 3.75em; position: relative; text-align: center; } .block-hero .inner-sm { position: relative; } .block-hero .block-header { margin-bottom: 0.75em; } .block-hero .block-title { font-size: 3em; } .block-hero .block-content { font-size: 1.25em; line-height: 1.5; } .block-hero .block-buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .block-hero .block-buttons a { font-size: 1em; margin-left: 0.5em; margin-right: 0.5em; } .block-hero + .block { margin-top: -5em; position: relative; } @media only screen and (min-width: 1001px) { .block-image:not(:only-child) { padding-right: 45px; } .grid-swap .block-image:not(:only-child) { padding-left: 45px; padding-right: 15px; } } @media only screen and (max-width: 1000px) { .block-grid .grid-item { margin-bottom: 3vw; } .block-grid .grid-item-title, .block-grid .grid-item-content, .block-grid .grid-item-buttons { padding-left: 1.5rem; padding-right: 1.5rem; } } @media only screen and (max-width: 800px) { .block-cta .has-gradient { padding-left: 3vw; padding-right: 3vw; } .block-cta .grid-item, .block-text .grid-item { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 680px; text-align: center; } .block-cta .block-buttons, .block-text .block-buttons { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .block-cta .block-buttons a, .block-text .block-buttons a { margin-left: 0.5em; margin-right: 0.5em; } } @media only screen and (max-width: 640px) { .block-title { font-size: 2em; } .block-hero .block-title { font-size: 2.25em; } .block-hero .block-content { font-size: 1.125em; } .block-hero .block-buttons a { font-size: 14px; } .block-text .block-content { font-size: 1em; } } /** * Site Footer */ .site-footer { background-color: #fff; padding-bottom: 1.5em; padding-top: 1.5em; } .site-footer a:not(.button) { color: inherit; } .site-footer a:not(.button):hover, .site-footer a:not(.button):focus { color: #12db5d; } .site-info, .social-links { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 0.875em; line-height: 1.2; } .site-info .button:not(.button-icon), .social-links .button:not(.button-icon) { font-size: inherit; line-height: 1.2; padding: 0.3em 1em; } .site-info { margin: 0.25em 0 0; } .site-info .copyright, .site-info a { margin: 0 8px 0.5em 0; } .social-links { margin-top: 0.9375em; } .social-links a { margin: 0 15px 0.5em; } .social-links .icon { font-size: 18px; } @media only screen and (min-width: 641px) { .site-footer-inside { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; } .site-info, .social-links { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .social-links { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -ms-flex-wrap: nowrap; flex-wrap: nowrap; margin-left: auto; margin-top: 0; } .social-links a { margin-left: 30px; margin-right: 0; } } /* PrismJS 1.16.0 https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=toolbar+copy-to-clipboard */ /** * prism.js default theme for JavaScript, CSS and HTML * Based on dabblet (http://dabblet.com) * @author Lea Verou */ code[class*="language-"], pre[class*="language-"] { color: #283040; background: none; font-family: Monaco, courier, monospace; font-size: 0.875rem; text-align: left; white-space: pre; word-spacing: normal; word-break: normal; word-wrap: normal; line-height: 1.5; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; } /* Code blocks */ pre[class*="language-"] { margin: 0 0 1.875rem; overflow: auto; padding: 1.5rem; } :not(pre) > code[class*="language-"], pre[class*="language-"] { background: #f7f9fb; } /* Inline code */ :not(pre) > code[class*="language-"] { padding: .1em; border-radius: 3px; white-space: normal; } .token.comment, .token.prolog, .token.doctype, .token.cdata { color: slategray; } .token.punctuation { color: #999; } .namespace { opacity: .7; } .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #905; } .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: #9a6e3a; background: rgba(255, 255, 255, 0.5); } .token.atrule, .token.attr-value, .token.keyword { color: #07a; } .token.function, .token.class-name { color: #DD4A68; } .token.regex, .token.important, .token.variable { color: #e90; } .token.important, .token.bold { font-weight: bold; } .token.italic { font-style: italic; } .token.entity { cursor: help; } div.code-toolbar { position: relative; } div.code-toolbar > .toolbar { position: absolute; top: 0; right: 0; } div.code-toolbar > .toolbar .toolbar-item { display: block; } div.code-toolbar > .toolbar a { border: 0; cursor: pointer; } div.code-toolbar > .toolbar button { background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } div.code-toolbar > .toolbar a, div.code-toolbar > .toolbar button, div.code-toolbar > .toolbar span { background: #dee5ef; color: #424b5f; display: block; font-size: .75em; line-height: 1.5; padding: .25em .5em; } div.code-toolbar > .toolbar a:hover, div.code-toolbar > .toolbar a:focus, div.code-toolbar > .toolbar button:hover, div.code-toolbar > .toolbar button:focus, div.code-toolbar > .toolbar span:hover, div.code-toolbar > .toolbar span:focus { text-decoration: none; }