/* Table of Contents
/* ------------------------------------------------------------

This is a development CSS file which is built to a minified
production stylesheet in assets/built/screen.css

1.  Global Styles
2.  Layout
3.  Single Post
  3.1. Post Byline
  3.2. Subscribe
  3.3. Read More
  3.4. Comments
4.  Cards
  4.1. audio
  4.2. before-after
  4.3. blockquote
  4.4. bookmark
  4.5. button
  4.6. callout
  4.7. file
  4.8. gallery
  4.9. header
  4.10. nft
  4.11. product
  4.12. toggle
  4.13. video
7.  Author Template
8.  Tag Template
9.  Error Template

*/


/* 1. Global - Set up the things
/* ---------------------------------------------------------- */

/* Import CSS reset and base styles */

/* Reset
/* ---------------------------------------------------------- */

#blogpronto html,
#blogpronto body,
#blogpronto div,
#blogpronto span,
#blogpronto applet,
#blogpronto object,
#blogpronto iframe,
#blogpronto h1,
#blogpronto h2,
#blogpronto h3,
#blogpronto h4,
#blogpronto h5,
#blogpronto h6,
#blogpronto p,
#blogpronto blockquote,
#blogpronto pre,
#blogpronto a,
#blogpronto abbr,
#blogpronto acronym,
#blogpronto address,
#blogpronto big,
#blogpronto cite,
#blogpronto code,
#blogpronto del,
#blogpronto dfn,
#blogpronto em,
#blogpronto img,
#blogpronto ins,
#blogpronto kbd,
#blogpronto q,
#blogpronto s,
#blogpronto samp,
#blogpronto small,
#blogpronto strike,
#blogpronto strong,
#blogpronto sub,
#blogpronto sup,
#blogpronto tt,
#blogpronto var,
#blogpronto dl,
#blogpronto dt,
#blogpronto dd,
#blogpronto ol,
#blogpronto ul,
#blogpronto li,
#blogpronto fieldset,
#blogpronto form,
#blogpronto label,
#blogpronto legend,
#blogpronto table,
#blogpronto caption,
#blogpronto tbody,
#blogpronto tfoot,
#blogpronto thead,
#blogpronto tr,
#blogpronto th,
#blogpronto td,
#blogpronto article,
#blogpronto aside,
#blogpronto canvas,
#blogpronto details,
#blogpronto embed,
#blogpronto figure,
#blogpronto figcaption,
#blogpronto footer,
#blogpronto header,
#blogpronto hgroup,
#blogpronto menu,
#blogpronto nav,
#blogpronto output,
#blogpronto ruby,
#blogpronto section,
#blogpronto summary,
#blogpronto time,
#blogpronto mark,
#blogpronto audio,
#blogpronto video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
#blogpronto ol,
#blogpronto ul {
    list-style: none;
}
#blogpronto blockquote,
#blogpronto q {
    quotes: none;
}
#blogpronto blockquote:before,
#blogpronto blockquote:after,
#blogpronto q:before,
#blogpronto q:after {
    content: "";
    content: none;
}
#blogpronto table {
    border-spacing: 0;
    border-collapse: collapse;
}
#blogpronto img {
    display: block;
    max-width: 100%;
    height: auto;
}
#blogpronto html {
    box-sizing: border-box;
    font-family: sans-serif;

    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
#blogpronto *,
#blogpronto *:before,
#blogpronto *:after {
    box-sizing: inherit;
}
#blogpronto a {
    background-color: transparent;
}
#blogpronto a:active,
#blogpronto a:hover {
    outline: 0;
}
#blogpronto b,
#blogpronto strong {
    font-weight: bold;
}
#blogpronto i,
#blogpronto em,
#blogpronto dfn {
    font-style: italic;
}
#blogpronto h1 {
    margin: 0.67em 0;
    font-size: 2em;
}
#blogpronto small {
    font-size: 80%;
}
#blogpronto sub,
#blogpronto sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
#blogpronto sup {
    top: -0.5em;
}
#blogpronto sub {
    bottom: -0.25em;
}
#blogpronto img {
    border: 0;
}
#blogpronto svg:not(:root) {
    overflow: hidden;
}
#blogpronto mark {
    background-color: #fdffb6;
}
#blogpronto code,
#blogpronto kbd,
#blogpronto pre,
#blogpronto samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
#blogpronto kbd {
    padding: 3px 5px;
    font-family: "monospace";
    font-size: 1.5rem;
    background: #f6f8fa;
    border: 1px solid rgba(124, 139, 154, 0.25);
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(124, 139, 154, 0.25);
}
@media (max-width: 600px) {
    #blogpronto kbd {
        font-size: 1.3rem;
    }
}
#blogpronto button,
#blogpronto input,
#blogpronto optgroup,
#blogpronto select,
#blogpronto textarea {
    margin: 0; /* 3 */
    color: inherit; /* 1 */
    font: inherit; /* 2 */
}
#blogpronto button {
    overflow: visible;
    border: none;
}
#blogpronto button,
#blogpronto select {
    text-transform: none;
}
#blogpronto button,
#blogpronto html input[type="button"],
/* 1 */
#blogpronto input[type="reset"],
#blogpronto input[type="submit"] {
    cursor: pointer; /* 3 */

    -webkit-appearance: button; /* 2 */
}
#blogpronto button[disabled],
#blogpronto html input[disabled] {
    cursor: default;
}
#blogpronto button::-moz-focus-inner,
#blogpronto input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
#blogpronto input {
    line-height: normal;
}
#blogpronto input:focus {
    outline: none;
}
#blogpronto input[type="checkbox"],
#blogpronto input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}
#blogpronto input[type="number"]::-webkit-inner-spin-button,
#blogpronto input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
#blogpronto input[type="search"] {
    box-sizing: content-box; /* 2 */

    -webkit-appearance: textfield; /* 1 */
}
#blogpronto input[type="search"]::-webkit-search-cancel-button,
#blogpronto input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
#blogpronto legend {
    padding: 0; /* 2 */
    border: 0; /* 1 */
}
#blogpronto textarea {
    overflow: auto;
}
#blogpronto table {
    border-spacing: 0;
    border-collapse: collapse;
}
#blogpronto td,
#blogpronto th {
    padding: 0;
}

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

#blogpronto html {
    font-size: 62.5%;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#blogpronto body,
#blogpronto p {
    font-size: 18px;
    line-height: 1.8rem;
    margin:  24px auto;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    text-rendering: optimizeLegibility;
    background: #fff;
    max-width: 600px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga" on;
}
@media (max-width: 600px) {
    #blogpronto body,
    #blogpronto p {
        font-size: 16px;
        line-height: 28px;
        margin:  24px auto;
    }
}

::selection {
    text-shadow: none;
    background: #daf2fd;
}

#blogpronto hr {
    position: relative;
    display: block;
    width: 100%;
    margin: 2.5em 0 3.5em;
    padding: 0;
    height: 1px;
    border: 0;
    border-top: 1px solid #f0f0f0;
}

#blogpronto audio,
#blogpronto canvas,
#blogpronto iframe,
#blogpronto img,
#blogpronto svg,
#blogpronto video {
    vertical-align: middle;
}

#blogpronto fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

#blogpronto textarea {
    resize: vertical;
}

::not(.gh-content) #blogpronto p,
::not(.gh-content) #blogpronto ul,
::not(.gh-content) #blogpronto ol,
::not(.gh-content) #blogpronto dl,
::not(.gh-content) #blogpronto blockquote {
    margin: 0 0 1.5em 0;
}

#blogpronto ol,
#blogpronto ul {
    padding-left: 1.75em;
    font-size: 18px;
}

@media (max-width: 600px) {
    #blogpronto ol,
    #blogpronto ul {
    font-size: 16px;
}
}

#blogpronto ol ol,
#blogpronto ul ul,
#blogpronto ul ol,
#blogpronto ol ul {
    margin: 0.5em 0 1em;
}

#blogpronto ul {
    list-style: disc;
}

#blogpronto ol {
    list-style: decimal;
}

#blogpronto ul,
#blogpronto ol {
    max-width: 100%;
}

#blogpronto li {
    padding-left: 0.3em;
    line-height: 28px;
}

#blogpronto li + li {
    margin-top: 1em;
}

#blogpronto dt {
    float: left;
    margin: 0 20px 0 0;
    width: 120px;
    color: #daf2fd;
    font-weight: 500;
    text-align: right;
}

#blogpronto dd {
    margin: 0 0 5px 0;
    text-align: left;
}

#blogpronto blockquote {
    margin: 1.5em 0;
    padding: 0 1.6em 0 1.6em;
    border-left: #daf2fd;
}

#blogpronto blockquote small {
    display: inline-block;
    margin: 0.8em 0 0.8em 1.5em;
    font-size: 0.9em;
    opacity: 0.8;
}
/* Quotation marks */
#blogpronto blockquote small:before {
    content: "\2014 \00A0";
}

#blogpronto blockquote cite {
    font-weight: bold;
}
#blogpronto blockquote cite a {
    font-weight: normal;
}

#blogpronto a {
    color: #15171A;
    text-decoration: none;
}
#blogpronto a:hover {
    text-decoration: underline;
}

#blogpronto h1,
#blogpronto h2,
#blogpronto h3,
#blogpronto h4,
#blogpronto h5,
#blogpronto h6 {
    margin: 32px auto 16px;
    line-height: 1.2;
    font-weight: 700;
    text-rendering: optimizeLegibility;
    max-width: 600px;
}

#blogpronto h1 {
    font-size: 48px;
}
@media (max-width: 600px) {
    #blogpronto h1 {
        font-size: 36px;
    }
}

#blogpronto h2 {
    font-size: 36px;
    font-weight: 700;
}
@media (max-width: 600px) {
    #blogpronto h2 {
        font-size: 28px;
    }
}

#blogpronto h3 {
    font-size: 28px;
    font-weight: 600;
}
@media (max-width: 600px) {
    #blogpronto h3 {
        font-size: 24px;
    }
}

#blogpronto h4 {
    font-size: 24px;
}
@media (max-width: 600px) {
    #blogpronto h4 {
        font-size: 20px
    }
}

#blogpronto h5 {
    font-size: 20px;
}
#blogpronto h5 {
        font-size: 18px
    }

#blogpronto h6 {
    font-size: 16px;
}

:root {

    /* Colors */
    --color-green: #a4d037;
    --color-yellow: #fecd35;
    --color-red: #f05230;
    --color-darkgrey: #15171A;
    --color-midgrey: #738a94;
    --color-lightgrey: #f1f1f1;
    --color-secondary-text: #979797;
    --color-border: #e1e1e1;
    --color-wash: #e5eff5;
    --color-darkmode: #151719;
    --ghost-accent-color: #111111;


    /* Fonts */
    --font-sans: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --font-serif: Georgia, Times, serif;
    --font-mono: Menlo, Courier, monospace;

}


/* 2. Layout - Page building blocks
/* ---------------------------------------------------------- */

#blogpronto .viewport {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#blogpronto .site-content {
    flex-grow: 1;
}

/* Full width page blocks */
#blogpronto .outer {
    position: relative;
    padding: 0 max(4vmin, 20px);
}

/* Centered content container blocks */
#blogpronto .inner {
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}


/* 3. Single Post
/* ---------------------------------------------------------- */

#blogpronto .article {
    padding: max(8vmin, 40px) 0 max(8vmin, 64px);
    word-break: break-word;
}

#blogpronto .page-template .article {
    padding-top: max(12vmin, 64px);
}

#blogpronto .article-header {
    padding: 0 0 max(6.4vmin, 40px) 0;
}

#blogpronto .page-template .article-header {
    padding-bottom: max(3.2vmin, 28px);
}

#blogpronto .article-tag {
    margin-bottom: 16px;
    font-size: 1.6rem;
}

#blogpronto .article-tag a {
    color: #979797;
}

#blogpronto .article-title {
    margin-bottom: 0;
    font-size: clamp(3.2rem, 5vw, 5.2rem);
    font-weight: 800;
    line-height: 1.05;
}

#blogpronto .has-serif-title .article-title {
    font-family: "Georgia";
}

#blogpronto .article-excerpt {
    margin-top: 20px;
    max-width: 720px;
    font-size: 2rem;
    line-height: 1.45;
}

#blogpronto .gh-canvas .article-image {
    grid-column: wide-start / wide-end;
    width: 100%;
    margin: max(6.4vmin, 40px) 0 0;
}

#blogpronto .image-full .article-image {
    grid-column: full-start / full-end;
}

#blogpronto .image-small .article-image {
    grid-column: main-start / main-end;
}

#blogpronto .gh-canvas .article-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

@media (max-width: 767px) {
    #blogpronto .article-excerpt {
        margin-top: 14px;
        font-size: 1.7rem;
    }
}

/* -------- */

/* Content grid
/* ---------------------------------------------------------- */

/* Canvas creates a multi-column, centered grid which the post
is laid out on top of. Canvas just defines the grid, we don't
use it for applying any other styles. */

#blogpronto .gh-canvas {
    display: grid;
    grid-template-columns:
        [full-start]
        minmax(max(4vmin, 20px), auto)
            [wide-start]
            minmax(auto, 240px)
                [main-start]
                    min(720px, calc(100% - max(8vmin, 40px)))
                [main-end]
            minmax(auto, 240px)
            [wide-end]
        minmax(max(4vmin, 20px), auto)
        [full-end]
    ;
}

#blogpronto .gh-canvas > * {
    grid-column: main-start / main-end;
}

#blogpronto .kg-width-wide {
    grid-column: wide-start / wide-end;
}

#blogpronto .kg-width-full {
    grid-column: full-start / full-end;
}

#blogpronto .kg-width-full img {
    width: 100%;
}


/* Content
/* ---------------------------------------------------------- */

/* Content refers to styling all page and post content that is
created within the Ghost editor. The main content handles
headings, text, images and lists. We deal with cards lower down. */

/* Default vertical spacing */
#blogpronto .gh-content > * + * {
    margin-top: max(3.2vmin, 24px);
    margin-bottom: 0;
}

/* [id] represents all headings h1-h6, reset all margins */
#blogpronto .gh-content > [id] {
    margin: 0;
}

#blogpronto .has-serif-title .gh-content > [id] {
    font-family: "Georgia";
}

/* Add back a top margin to all headings, unless a heading
is the very first element in the post content */
#blogpronto .gh-content > [id]:not(:first-child) {
    margin: 2em 0 0;
}

/* Add a small margin between a heading and anything after it */
#blogpronto .gh-content > [id] + * {
    margin-top: 1.5rem !important;
}

/* A larger margin before/after HRs and blockquotes */
#blogpronto .gh-content > hr,
#blogpronto .gh-content > blockquote {
    position: relative;
    margin-top: max(4.8vmin, 32px);
}
#blogpronto .gh-content > hr + *,
#blogpronto .gh-content > blockquote + * {
    margin-top: max(4.8vmin, 32px) !important;
}

/* Now the content typography styles */
#blogpronto .gh-content a {
    color: var(--ghost-accent-color);
    text-decoration: underline;
    word-break: break-word;
}

#blogpronto .gh-content > blockquote:not([class]),
#blogpronto .gh-content > ol,
#blogpronto .gh-content > ul,
#blogpronto .gh-content > dl,
#blogpronto .gh-content > p {
    font-family: "Georgia";
    font-weight: 400;
    font-size: 2rem;
    line-height: 1.6em;
}

#blogpronto .gh-content .kg-callout-card .kg-callout-text,
#blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ol,
#blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ul,
#blogpronto .gh-content .kg-toggle-card .kg-toggle-content > p {
    font-family: "Georgia";
    font-weight: 400;
    font-size: 1.9rem;
    line-height: 1.6em;
}

#blogpronto .gh-content .kg-product-card .kg-product-card-description > p,
#blogpronto .gh-content .kg-product-card .kg-product-card-description > ol,
#blogpronto .gh-content .kg-product-card .kg-product-card-description > ul {
    font-size: 1.7rem;
    line-height: 1.6em;
}

#blogpronto .gh-content .kg-callout-card .kg-callout-emoji {
    font-size: 2.1rem;
    line-height: 1.4em;
}

#blogpronto .gh-content .kg-toggle-card .kg-toggle-heading-text {
    font-size: 2.0rem;
}

#blogpronto .gh-content > ul,
#blogpronto .gh-content > ol,
#blogpronto .gh-content > dl,
#blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ol,
#blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ul,
#blogpronto .gh-content .kg-product-card .kg-product-card-description > ol,
#blogpronto .gh-content .kg-product-card .kg-product-card-description > ul {
    padding-left: 1.9em;
}

#blogpronto .gh-content > blockquote:not([class]) {
    position: relative;
    font-style: italic;
    padding: 0;
}

#blogpronto .gh-content > blockquote:not([class])::before {
    content: "";
    position: absolute;
    left: -1.5em;
    top: 0;
    bottom: 0;
    width: 0.3rem;
    background: var(--ghost-accent-color);
}

#blogpronto .gh-content :not(pre) > code {
    vertical-align: middle;
    padding: 0.15em 0.4em 0.15em;
    border: #e1eaef 1px solid;
    font-weight: 400 !important;
    font-size: 0.9em;
    line-height: 1em;
    background: #f0f6f9;
    border-radius: 0.25em;
}

#blogpronto .gh-content pre {
    overflow: auto;
    padding: 16px 20px;
    color: #e5eff5;
    font-size: 1.4rem;
    line-height: 1.5em;
    background: #15171A;
    border-radius: 5px;
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.1), 0 0 1px rgba(0,0,0,.4);
}

@media (max-width: 650px) {
    #blogpronto .gh-content > blockquote:not([class]),
    #blogpronto .gh-content > ol,
    #blogpronto .gh-content > ul,
    #blogpronto .gh-content > dl,
    #blogpronto .gh-content > p,
    #blogpronto .gh-content .kg-callout-card .kg-callout-text,
    #blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ol,
    #blogpronto .gh-content .kg-toggle-card .kg-toggle-content > ul,
    #blogpronto .gh-content .kg-toggle-card .kg-toggle-content > p {
        font-size: 1.8rem;
    }

    #blogpronto .gh-content .kg-product-card .kg-product-card-description > p,
    #blogpronto .gh-content .kg-product-card .kg-product-card-description > ol,
    #blogpronto .gh-content .kg-product-card .kg-product-card-description > ul {
        font-size: 1.6rem;
    }

    #blogpronto .gh-content blockquote:not([class])::before {
        left: min(-4vmin, -20px);
    }
}


/* Cards
/* ---------------------------------------------------------- */

/* Cards are dynamic blocks of content which appear within Ghost
posts, for example: embedded videos, tweets, galleries, or
specially styled bookmark links. We add extra styling here to
make sure they look good, and are given a bit of extra spacing. */

/* Add extra margin before/after any cards,
except for when immediately preceeded by a heading */
#blogpronto .gh-content :not(.kg-card):not([id]) + .kg-card {
    margin-top: 6vmin;
    margin-bottom: 0;
}
#blogpronto .gh-content .kg-card + :not(.kg-card) {
    margin-top: 6vmin;
    margin-bottom: 0;
}

#blogpronto .kg-embed-card:not(:has(iframe[src*="youtube"])) {
    padding-bottom: 0;
}

#blogpronto .kg-embed-card:has(iframe[src*="youtube"]) {
    position: relative;
    padding-bottom: 56.5%;
}

#blogpronto .kg-embed-card:has(iframe[src*="youtube"]) iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#blogpronto .kg-image-card {
    margin: 40px auto;
}
@media (max-width: 600px) {
    #blogpronto .kg-image-card {
        margin: 32px auto;
    }
}

/* This keeps small iamges centered */
#blogpronto .kg-image-card img {
    margin: auto;
}

#blogpronto .has-serif-title .kg-toggle-card .kg-toggle-heading-text {
    font-family: "Georgia";
}

#blogpronto .gh-content .kg-callout-card-accent a {
    text-decoration: underline;
}

#blogpronto .kg-blockquote-alt {
    font-family: "Georgia";
    color: #738a94;
}

#blogpronto .kg-card.kg-header-card.kg-style-dark {
    background: #15171A;
}

#blogpronto .kg-header-card.kg-style-light h2.kg-header-card-header {
    color: color-mod(#15171A l(-5%));
}

#blogpronto .has-serif-title .kg-header-card h2.kg-header-card-header {
    font-family: "Georgia";
}


/* Captions */
#blogpronto figcaption {
    padding: 1.5rem 1.5rem 0;
    text-align: center;
    color: rgba(0,0,0,0.5);
    font-size: 1.3rem;
    line-height: 1.4em;
}
#blogpronto figcaption strong {
    color: rgba(0,0,0,0.8);
}
#blogpronto figcaption a {
    text-decoration: underline;
}


/* Highly specific styles for traditional Instagram embeds */
#blogpronto iframe.instagram-media {
    margin-top: 6vmin !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
}

#blogpronto iframe.instagram-media + script + :not([id]) {
    margin-top: 6vmin;
}


/* Card captions
/* ---------------------------------------------------------- */

#blogpronto .kg-width-full.kg-card-hascaption {
    display: grid;
    grid-template-columns: inherit;
}

#blogpronto .kg-width-wide.kg-card-hascaption img {
    grid-column: wide-start / wide-end;
}
#blogpronto .kg-width-full.kg-card-hascaption img {
    grid-column: 1 / -1;
}

#blogpronto .kg-width-full.kg-card-hascaption figcaption {
    grid-column: main-start / main-end;
}

#blogpronto .article-comments {
    margin: 6vmin 0 0 0;
}

/* -----old------ */

#blogpronto .footnotes-sep {
    margin-bottom: 30px;
}

#blogpronto .footnotes {
    font-size: 1.5rem;
}

#blogpronto .footnotes p {
    margin: 0;
}

#blogpronto .footnote-backref {
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* Tables */
#blogpronto .gh-content table:not(.gist table) {
    display: inline-block;
    overflow-x: auto;
    max-width: 100%;
    width: auto;
    border-spacing: 0;
    border-collapse: collapse;
    font-size: 1.6rem;
    white-space: nowrap;
    vertical-align: top;
    -webkit-overflow-scrolling: touch;
    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center, radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
    background-attachment: scroll, scroll;
    background-size: 10px 100%, 10px 100%;
    background-repeat: no-repeat;
}

#blogpronto .gh-content table:not(.gist table) td:first-child {
    background-image: linear-gradient(to right, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
    background-size: 20px 100%;
    background-repeat: no-repeat;
}

#blogpronto .gh-content table:not(.gist table) td:last-child {
    background-image: linear-gradient(to left, rgba(255,255,255, 1) 50%, rgba(255,255,255, 0) 100%);
    background-position: 100% 0;
    background-size: 20px 100%;
    background-repeat: no-repeat;
}

#blogpronto .gh-content table:not(.gist table) th {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: left;
    text-transform: uppercase;
    background-color: color-mod(#e5eff5 l(+4%));
}

#blogpronto .gh-content table:not(.gist table) th,
#blogpronto .gh-content table:not(.gist table) td {
    padding: 6px 12px;
    border: color-mod(#e5eff5 l(-1%) s(-5%)) 1px solid;
}


/* 3.1. Post Byline
/* ---------------------------------------------------------- */

#blogpronto .article-byline {
    display: flex;
    justify-content: space-between;
    margin: min(24px, 5.6vmin) 0 0;
}

#blogpronto .article-byline-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

#blogpronto .article-byline-content .author-list {
    justify-content: flex-start;
    padding: 0 14px 0 0;
}

#blogpronto .article-byline-meta {
    color: #979797;
    font-size: 1.4rem;
    line-height: 1.2em;
}

#blogpronto .article-byline-meta .author-name {
    margin: 0 0 6px;
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: 0;
}

#blogpronto .article-byline-meta .bull {
    display: inline-block;
    margin: 0 2px;
}

#blogpronto .author-avatar {
    display: block;
    overflow: hidden;
    margin: 0 -4px;
    width: min(56px, 13.6vmin);
    height: min(56px, 13.6vmin);
    border: #fff 2px solid;
    border-radius: 50%;
    background-color: #e1e1e1;
}

#blogpronto .page-template .article-title {
    margin-bottom: 0;
}

@media (max-width: 767px) {
    #blogpronto .article-byline-content .author-list {
        padding-right: 12px;
    }
    #blogpronto .article-byline-meta .author-name {
        margin-bottom: 4px;
    }
}


/* 3.2. Subscribe
/* ---------------------------------------------------------- */

#blogpronto .footer-cta {
    position: relative;
    text-align: center;
}

#blogpronto .footer-cta-title {
    margin: 0 0 min(24px, 6.4vmin);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 800;
}

#blogpronto .has-serif-title .footer-cta-title {
    font-family: "Georgia";
}

#blogpronto .footer-cta-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 500px;
    padding: 5px 5px 5px 15px;
    font-size: 1.7rem;
    color: #979797;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    transition: border-color 0.2s;
}

#blogpronto .footer-cta-button:hover {
    border-color: color-mod(#e1e1e1 l(-12%));
}

#blogpronto .footer-cta-button span {
    display: inline-block;
    padding: 9px 15px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    background: var(--ghost-accent-color);
    border-radius: 6px;
}


/* 3.3. Read more
/* ---------------------------------------------------------- */

#blogpronto .read-more-wrap {
    margin-top: 2.4vmin;
}

#blogpronto .footer-cta + .read-more-wrap {
    margin-top: max(12vmin, 72px);
}

#blogpronto .read-more {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 4vmin;
}

#blogpronto .read-more .post-card-tags {
    display: none;
}

@media (max-width: 1000px) {
    #blogpronto .read-more {
        grid-template-columns: repeat(4, 1fr);
    }
    #blogpronto .read-more .post-card:nth-child(3) {
        display: none;
    }
}

@media (max-width: 700px) {
    #blogpronto .read-more {
        grid-template-columns: repeat(2, 1fr);
    }
    #blogpronto .read-more .post-card:nth-child(2) {
        display: none;
    }
}

/* 3.4. Comments
/* ---------------------------------------------------------- */
#blogpronto .comments {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0 44px;
}


#blogpronto .comments-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 32px;
    width: 100%;
    max-width: 720px;
}

#blogpronto .comments h2 {
    width: 100%;
    max-width: 720px;
    font-weight: 800;
    font-size: 3.4rem;
}

#blogpronto .comments .comment-count {
    color: #738a94;
    font-weight: 600;
    white-space: nowrap;
}

#blogpronto .comments #ghost-comments-root {
    width: 100%;
    max-width: 720px;
}


/* 4. Cards
/* ---------------------------------------------------------- */

/* 4.1. Audio
/* ---------------------------------------------------------- */

#blogpronto .kg-audio-card,
#blogpronto .kg-audio-card * {
    box-sizing: border-box;
}

#blogpronto .kg-audio-card {
    display: flex;
    width: 100%;
    min-height: 96px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
}

#blogpronto .kg-audio-card+.kg-audio-card {
    margin-top: 1em;
}

#blogpronto .kg-audio-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    min-width: 80px;
    margin: 8px;
    background: transparent;
    object-fit: cover;
    aspect-ratio: 1/1;
    border-radius: 2px;
}

#blogpronto .kg-audio-thumbnail.placeholder {
    background: var(--ghost-accent-color);
}

#blogpronto .kg-audio-thumbnail.placeholder svg {
    width: 24px;
    height: 24px;
    fill: white;
}

#blogpronto .kg-audio-player-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
}

#blogpronto .kg-audio-title {
    width: 100%;
    margin: 8px 0 0 0;
    padding: 8px 12px;
    border: none;
    font-family: inherit;
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.15em;
    background: transparent;
}

#blogpronto .kg-audio-player {
    display: flex;
    flex-grow: 1;
    align-items: center;
    padding: 8px 12px;
}

#blogpronto .kg-audio-current-time {
    min-width: 38px;
    padding: 0 4px;
    font-family: inherit;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.4em;
    white-space: nowrap;
}

#blogpronto .kg-audio-time {
    width: 56px;
    color: #ababab;
    font-family: inherit;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.4em;
    white-space: nowrap;
}

#blogpronto .kg-audio-duration {
    padding: 0 4px;
}

#blogpronto .kg-audio-play-icon,
#blogpronto .kg-audio-pause-icon {
    position: relative;
    bottom: 1px;
    padding: 0px 4px 0 0;
    font-size: 0;
    background: transparent;
}

#blogpronto .kg-audio-hide {
    display: none !important;
}

#blogpronto .kg-audio-play-icon svg,
#blogpronto .kg-audio-pause-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

#blogpronto .kg-audio-seek-slider {
    flex-grow: 1;
    margin: 0 4px;
}

@media (max-width: 640px) {
    #blogpronto .kg-audio-seek-slider {
        display: none;
    }
}

#blogpronto .kg-audio-playback-rate {
    min-width: 37px;
    padding: 0 4px;
    font-family: inherit;
    font-size: .85em;
    font-weight: 600;
    line-height: 1.4em;
    text-align: left;
    background: transparent;
    white-space: nowrap;
}

@media (max-width: 640px) {
    #blogpronto .kg-audio-playback-rate {
        padding-left: 8px;
    }
}

#blogpronto .kg-audio-mute-icon,
#blogpronto .kg-audio-unmute-icon {
    position: relative;
    bottom: -1px;
    padding: 0 4px;
    font-size: 0;
    background: transparent;
}

@media (max-width: 640px) {
    .kg-audio-mute-icon,
    .kg-audio-unmute-icon  {
        margin-left: auto;
    }
}

#blogpronto .kg-audio-mute-icon svg,
#blogpronto .kg-audio-unmute-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

#blogpronto .kg-audio-volume-slider {
    width: 80px;
}

@media (max-width: 400px) {
    #blogpronto .kg-audio-volume-slider {
        display: none;
    }
}

#blogpronto .kg-audio-seek-slider::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--seek-before-width) !important;
    height: 4px;
    cursor: pointer;
    background-color: currentColor;
    border-radius: 2px;
}

#blogpronto .kg-audio-volume-slider::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--volume-before-width) !important;
    height: 4px;
    cursor: pointer;
    background-color: currentColor;
    border-radius: 2px;
}

/* Resetting browser styles
/* --------------------------------------------------------------- */

#blogpronto .kg-audio-player-container input[type=range] {
    position: relative;
    -webkit-appearance: none;
    background: transparent;
}

#blogpronto .kg-audio-player-container input[type=range]:focus {
    outline: none;
}

#blogpronto .kg-audio-player-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

#blogpronto .kg-audio-player-container input[type=range]::-ms-track {
    cursor: pointer;
    border-color: transparent;
    color: transparent;
    background: transparent;
}

#blogpronto .kg-audio-player-container button {
    display: flex;
    align-items: center;
    border: 0;
    cursor: pointer;
}

#blogpronto .kg-audio-player-container input[type="range"] {
    height: auto;
    padding: 0;
    border: 0;
}

/* Chrome & Safari styles
/* --------------------------------------------------------------- */

#blogpronto .kg-audio-player-container input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(124, 139, 154, 0.25);
    border-radius: 2px;
}

#blogpronto .kg-audio-player-container input[type="range"]::-webkit-slider-thumb {
    position: relative;
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    margin: -5px 0 0 0;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-audio-player-container input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Firefox styles
/* --------------------------------------------------------------- */

#blogpronto .kg-audio-player-container input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(124, 139, 154, 0.25);
    border-radius: 2px;
}

#blogpronto .kg-audio-player-container input[type="range"]::-moz-range-progress {
    background: currentColor;
    border-radius: 2px;
}

#blogpronto .kg-audio-player-container input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-audio-player-container input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
}

/* Edge & IE styles
/* --------------------------------------------------------------- */

#blogpronto .kg-audio-player-container input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    border: solid transparent;
    color: transparent;
    cursor: pointer;
    background: transparent;
}

#blogpronto .kg-audio-player-container input[type="range"]::-ms-fill-lower {
    background: #fff;
}

#blogpronto .kg-audio-player-container input[type="range"]::-ms-fill-upper {
    background: currentColor;
}

#blogpronto .kg-audio-player-container input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-audio-player-container input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
}

/* 4.2. Before-After
/* ---------------------------------------------------------- */

#blogpronto .kg-before-after-card > div {
    position: relative;
    margin: 0 auto;
}

#blogpronto .kg-before-after-card-image-before {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    height: 100%;
}

#blogpronto .kg-before-after-card .kg-before-after-card-image-after img {
    width: 100%;
}

#blogpronto .kg-before-after-card .kg-before-after-card-image-before img {
    max-width: none;
    object-fit: cover;
}

#blogpronto .kg-before-after-card input {
    position: absolute;
    top: 0;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
    outline: none;
    margin: 0;
}

#blogpronto .kg-before-after-card input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 5px;
    height: 100%;
    background: white;
    cursor: pointer;
}

#blogpronto .kg-before-after-card input::-moz-range-thumb {
    width: 5px;
    height: 100%;
    background: white;
    cursor: pointer;
}

#blogpronto .kg-before-after-card-slider-handle {
    pointer-events: none;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: white;
    left: calc(50% - 18px);
    top: calc(50% - 18px);
    display: flex;
    justify-content: center;
    align-items: center;
}

#blogpronto .kg-before-after-card-slider-handle:after {
    transform: rotate(-45deg);
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5D5D5D;
    border-width: 0 2px 2px 0;
}

#blogpronto .kg-before-after-card-slider-handle:before {
    transform: rotate(135deg);
    content: '';
    padding: 3px;
    display: inline-block;
    border: solid #5D5D5D;
    border-width: 0 2px 2px 0;
}

/* 4.3. Blockquote
/* ---------------------------------------------------------- */

#blogpronto .kg-blockquote-alt {
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.7em;
  text-align: center;
  padding: 0 2.5em;
}

@media (max-width: 800px) {
  #blogpronto .kg-blockquote-alt {
    font-size: 1.4em;
    padding-left: 2em;
    padding-right: 2em;
  }
}

@media (max-width: 600px) {
  #blogpronto .kg-blockquote-alt {
    font-size: 1.2em;
    padding-left: 1.75em;
    padding-right: 1.75em;
  } 
}

/* 4.4. Bookmark
/* ---------------------------------------------------------- */

#blogpronto .kg-bookmark-card,
#blogpronto .kg-bookmark-card * {
    box-sizing: border-box;
}

#blogpronto .kg-bookmark-card,
#blogpronto .kg-bookmark-publisher {
    position: relative;
    width: 100%;
}

#blogpronto .kg-bookmark-card a.kg-bookmark-container,
#blogpronto .kg-bookmark-card a.kg-bookmark-container:hover {
    display: flex;
    text-decoration: none;
    border-radius: 3px;
    border: 1px solid rgb(124 139 154 / 25%);
    overflow: hidden;
    color: inherit;
    padding:  10px 20px;
}

#blogpronto .kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 20px 20px 20px 0;
    overflow: hidden;
    color: var(--color_text_default);
}

#blogpronto .kg-bookmark-title {
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
}

#blogpronto .kg-bookmark-description {
    display: -webkit-box;
    font-size: 14px;
    line-height: 18px;
    margin-top: 4px;
    font-weight: 400;
    max-height: 44px;
    overflow-y: hidden;
    opacity: 1;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#blogpronto .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-top: 22px;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    white-space: nowrap;
}

#blogpronto .kg-bookmark-metadata > *:not(img) {
    opacity: 0.7;
}

#blogpronto .kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

#blogpronto .kg-bookmark-author,
#blogpronto .kg-bookmark-publisher {
    display: inline;
}

#blogpronto .kg-bookmark-author {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--color_primary_default) !important;
    opacity: 1 !important;
}

#blogpronto .kg-bookmark-publisher {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 240px;
    white-space: nowrap;
    display: block;
    line-height: 1.65em;
}

#blogpronto .kg-bookmark-metadata > span:nth-of-type(2) {
    font-weight: 400;
}

#blogpronto .kg-bookmark-metadata > span:nth-of-type(2):before {
    content: "•";
    margin: 0 6px;
}

#blogpronto .kg-bookmark-metadata > span:last-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
}

#blogpronto .kg-bookmark-thumbnail {
    position: relative;
    flex-grow: 1;
    min-width: 33%;
}

#blogpronto .kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 2px 2px 0;
}

/* 4.5. Button
/* ---------------------------------------------------------- */

#blogpronto .kg-button-card,
#blogpronto .kg-button-card * {
    box-sizing: border-box;
}

#blogpronto .kg-button-card {
    display: flex;
    position: static;
    align-items: center;
    width: 100%;
    justify-content: center;
}

#blogpronto .kg-button-card.kg-align-left {
    justify-content: flex-start;
}

#blogpronto .kg-button-card a.kg-btn {
    display: flex;
    position: static;
    align-items: center;
    padding: 0 1.2em;
    height: 2.4em;
    line-height: 1em;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    transition: opacity 0.2s ease-in-out;
}

#blogpronto .kg-button-card a.kg-btn:hover {
    opacity: 0.85;
}

#blogpronto .kg-button-card a.kg-btn-accent {
    background-color: var(--ghost-accent-color);
    color: #fff;
}

/* 4.6. Callout
/* ---------------------------------------------------------- */

#blogpronto .kg-callout-card,
#blogpronto .kg-callout-card * {
    box-sizing: border-box;
}

#blogpronto .kg-callout-card {
    display: flex;
    padding: 1.2em 1.6em;
    border-radius: 3px;
}

#blogpronto .kg-callout-card-grey {
    background: rgba(124, 139, 154, 0.13);
}

#blogpronto .kg-callout-card-white {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
}

#blogpronto .kg-callout-card-blue {
    background: rgba(33, 172, 232, 0.12);
}

#blogpronto .kg-callout-card-green {
    background: rgba(52, 183, 67, 0.12);
}

#blogpronto .kg-callout-card-yellow {
    background: rgba(240, 165, 15, 0.13);
}

#blogpronto .kg-callout-card-red {
    background: rgba(209, 46, 46, 0.11);
}

#blogpronto .kg-callout-card-pink {
    background: rgba(225, 71, 174, 0.11);
}

#blogpronto .kg-callout-card-purple {
    background: rgba(135, 85, 236, 0.12);
}

#blogpronto .kg-callout-card-accent {
    background: var(--ghost-accent-color);
    color: #fff;
}

#blogpronto .kg-callout-card.kg-callout-card-accent a {
    color: #fff;
    text-decoration: underline;
}

#blogpronto .kg-callout-card div.kg-callout-emoji {
    padding-right: .8em;
    line-height: 1.25em;
    font-size: 1.15em;
}

#blogpronto .kg-callout-card div.kg-callout-text {
    font-size: .95em;
    line-height: 1.5em;
}

#blogpronto .kg-callout-card + .kg-callout-card {
    margin-top: 1em;
}

/* 4.7. File
/* ---------------------------------------------------------- */

#blogpronto .kg-file-card,
#blogpronto .kg-file-card * {
    box-sizing: border-box;
}

#blogpronto .kg-file-card {
    display: flex;
}

#blogpronto .kg-file-card a.kg-file-card-container {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    color: inherit;
    padding: 6px;
    min-height: 92px;
    border: 1px solid rgb(124 139 154 / 25%);
    border-radius: 3px;
    transition: all ease-in-out 0.35s;
    text-decoration: none;
    width: 100%;
}

#blogpronto .kg-file-card a.kg-file-card-container:hover {
    border: 1px solid rgb(124 139 154 / 35%);
}

#blogpronto .kg-file-card-contents {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 4px 8px;
    width: 100%
}

#blogpronto .kg-file-card-title {
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3em;
}

#blogpronto .kg-file-card-caption {
    font-size: 0.95em;
    line-height: 1.3em;
    opacity: 0.6;
}

#blogpronto .kg-file-card-title + .kg-file-card-caption {
    margin-top: -3px;
}

#blogpronto .kg-file-card-metadata {
    display: inline;
    font-size: 0.825em;
    line-height: 1.3em;
    margin-top: 2px;
}

#blogpronto .kg-file-card-filename {
    display: inline;
    font-weight: 500;
}

#blogpronto .kg-file-card-filesize {
    display: inline-block;
    font-size: 0.925em;
    opacity: 0.6;
}

#blogpronto .kg-file-card-filesize:before {
    display: inline-block;
    content: "\2022";
    margin-right: 4px;
}

#blogpronto .kg-file-card-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    min-width: 80px;
    height: 100%;
}

#blogpronto .kg-file-card-icon:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: currentColor;
    opacity: 0.06;
    transition: opacity ease-in-out 0.35s;
    border-radius: 2px;
}

#blogpronto .kg-file-card a.kg-file-card-container:hover .kg-file-card-icon:before {
    opacity: 0.08;
}

#blogpronto .kg-file-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--ghost-accent-color);
}

/* Size variations */
#blogpronto .kg-file-card-medium a.kg-file-card-container {
    min-height: 72px;
}

#blogpronto .kg-file-card-medium .kg-file-card-caption {
    opacity: 1.0;
    font-weight: 500;
}

#blogpronto .kg-file-card-small a.kg-file-card-container {
    align-items: center;
    min-height: 52px;
}

#blogpronto .kg-file-card-small .kg-file-card-metadata {
    font-size: 1.0em;
    margin-top: 0;
}

#blogpronto .kg-file-card-small .kg-file-card-icon svg {
    width: 20px;
    height: 20px;
}

#blogpronto .kg-file-card + .kg-file-card {
    margin-top: 1em;
}

/* 4.8. Gallery
/* ---------------------------------------------------------- */

#blogpronto .kg-gallery-card,
#blogpronto .kg-gallery-card * {
    box-sizing: border-box;
}

#blogpronto .kg-gallery-card,
#blogpronto .kg-image-card {
    --gap: 1.2rem;
}

#blogpronto .kg-image-card:not(.kg-card-hascaption) + .kg-image-card,
#blogpronto .kg-image-card:not(.kg-card-hascaption) + .kg-gallery-card,
#blogpronto .kg-gallery-card:not(.kg-card-hascaption) + .kg-image-card,
#blogpronto .kg-gallery-card:not(.kg-card-hascaption) + .kg-gallery-card {
    margin-top: var(--gap);
}

#blogpronto .kg-gallery-container {
    position: relative;
}

#blogpronto .kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#blogpronto .kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

#blogpronto .kg-gallery-row:not(:first-of-type) {
    margin: var(--gap) 0 0;
}

#blogpronto .kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 var(--gap);
}

@media (max-width: 600px) {
    #blogpronto .kg-gallery-card,
    #blogpronto .kg-image-card {
        --gap: 0.6rem;
    }
}

/* 4.9. Header
/* ---------------------------------------------------------- */

#blogpronto .kg-header-card,
#blogpronto .kg-header-card * {
    box-sizing: border-box;
}

#blogpronto .kg-header-card {
    padding: 12vmin 4em;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#blogpronto .kg-header-card.kg-size-small {
    padding-top: 14vmin;
    padding-bottom: 14vmin;
    min-height: 40vh;
}

#blogpronto .kg-header-card.kg-size-large {
    padding-top: 18vmin;
    padding-bottom: 18vmin;
    min-height: 80vh;
}

#blogpronto .kg-header-card.kg-align-left {
    text-align: left;
    align-items: flex-start;
}

#blogpronto .kg-header-card.kg-style-dark {
    background: #151515;
    color: #ffffff;
}

#blogpronto .kg-header-card.kg-style-light {
    background-color: #fafafa;
}

#blogpronto .kg-header-card.kg-style-accent {
    background-color: var(--ghost-accent-color);
}

#blogpronto .kg-header-card.kg-style-image {
    position: relative;
    background-color: #e7e7e7;
    background-size: cover;
    background-position: center;
}

#blogpronto .kg-header-card.kg-style-image::before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

#blogpronto .kg-header-card h2.kg-header-card-header {
    font-size: 5em;
    font-weight: 700;
    line-height: 1.1em;
    letter-spacing: -0.01em;
    margin: 0;
}

#blogpronto .kg-header-card h2.kg-header-card-header strong {
    font-weight: 800;
}

#blogpronto .kg-header-card.kg-size-small h2.kg-header-card-header {
    font-size: 4em;
}

#blogpronto .kg-header-card.kg-size-large h2.kg-header-card-header {
    font-size: 6em;
}

#blogpronto .kg-header-card h3.kg-header-card-subheader {
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.4em;
    margin: 0;
    max-width: 40em;
}

#blogpronto .kg-header-card h2 + h3.kg-header-card-subheader {
    margin: 0.35em 0 0;
}

#blogpronto .kg-header-card h3.kg-header-card-subheader strong {
    font-weight: 600;
}

#blogpronto .kg-header-card.kg-size-small h3.kg-header-card-subheader {
    font-size: 1.25em;
}

#blogpronto .kg-header-card.kg-size-large h3.kg-header-card-subheader {
    font-size: 1.75em;
}

#blogpronto .kg-header-card:not(.kg-style-light) h2.kg-header-card-header,
#blogpronto .kg-header-card:not(.kg-style-light) h3.kg-header-card-subheader {
    color: #ffffff;
}

#blogpronto .kg-header-card.kg-style-accent h3.kg-header-card-subheader,
#blogpronto .kg-header-card.kg-style-image h3.kg-header-card-subheader {
    opacity: 1.0;
}

#blogpronto .kg-header-card.kg-style-image h2.kg-header-card-header,
#blogpronto .kg-header-card.kg-style-image h3.kg-header-card-subheader,
#blogpronto .kg-header-card.kg-style-image a.kg-header-card-button {
    z-index: 999;
}

#blogpronto .kg-header-card h2.kg-header-card-header a,
#blogpronto .kg-header-card h3.kg-header-card-subheader a {
    color: var(--ghost-accent-color);
}

#blogpronto .kg-header-card.kg-style-accent h2.kg-header-card-header a,
#blogpronto .kg-header-card.kg-style-accent h3.kg-header-card-subheader a,
#blogpronto .kg-header-card.kg-style-image h2.kg-header-card-header a,
#blogpronto .kg-header-card.kg-style-image h3.kg-header-card-subheader a {
    color: #fff;
}

#blogpronto .kg-header-card a.kg-header-card-button {
    display: flex;
    position: static;
    align-items: center;
    fill: #fff;
    background: #fff;
    border-radius: 3px;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1em;
    text-align: center;
    text-decoration: none;
    letter-spacing: .2px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #151515;
    height: 2.7em;
    padding: 0 1.2em;
    transition: opacity .2s ease;
}

#blogpronto .kg-header-card h2 + a.kg-header-card-button,
#blogpronto .kg-header-card h3 + a.kg-header-card-button {
    margin: 1.75em 0 0;
}

#blogpronto .kg-header-card a.kg-header-card-button:hover {
    opacity: 0.85;
}

#blogpronto .kg-header-card.kg-size-large a.kg-header-card-button {
    font-size: 1.1em;
    height: 2.9em;
}

#blogpronto .kg-header-card.kg-size-large h2 + a.kg-header-card-button,
#blogpronto .kg-header-card.kg-size-large h3 + a.kg-header-card-button {
    margin-top: 2em;
}

#blogpronto .kg-header-card.kg-size-small a.kg-header-card-button {
    height: 2.4em;
    font-size: 1em;
}

#blogpronto .kg-header-card.kg-size-small h2 + a.kg-header-card-button,
#blogpronto .kg-header-card.kg-size-small h3 + a.kg-header-card-button {
    margin-top: 1.5em;
}

#blogpronto .kg-header-card.kg-style-image a.kg-header-card-button,
#blogpronto .kg-header-card.kg-style-dark a.kg-header-card-button {
    background: #fff;
    color: #151515;
}

#blogpronto .kg-header-card.kg-style-light a.kg-header-card-button {
    background: var(--ghost-accent-color);
    color: #fff;
}

#blogpronto .kg-header-card.kg-style-accent a.kg-header-card-button {
    background: #fff;
    color: #151515;
}

@media (max-width: 640px) {
    #blogpronto .kg-header-card {
        padding-left: 1em;
        padding-right: 1em;
    }

    #blogpronto .kg-header-card h2.kg-header-card-header {
        font-size: 3.5em;
    }

    #blogpronto .kg-header-card.kg-size-large h2.kg-header-card-header {
        font-size: 4em;
    }

    #blogpronto .kg-header-card.kg-size-small h2.kg-header-card-header {
        font-size: 3em;
    }

    #blogpronto .kg-header-card h3.kg-header-card-subheader {
        font-size: 1.25em;
    }

    #blogpronto .kg-header-card.kg-size-large h3.kg-header-card-subheader {
        font-size: 1.5em;
    }

    #blogpronto .kg-header-card.kg-size-small h3.kg-header-card-subheader {
        font-size: 1em;
    }
}

/* 4.10. NFT
/* ---------------------------------------------------------- */

#blogpronto .kg-nft-card,
#blogpronto .kg-nft-card * {
    box-sizing: border-box;
}

#blogpronto .kg-nft-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

#blogpronto .kg-nft-card a.kg-nft-card-container {
    position: static;
    display: flex;
    flex: auto;
    flex-direction: column;
    text-decoration: none;
    font-family: -apple-system, BlinkMacSystemFont,
                'avenir next', avenir,
                'helvetica neue', helvetica,
                ubuntu,
                roboto, noto,
                'segoe ui', arial,
                sans-serif;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 2px 6px -2px rgb(0 0 0 / 10%), 0 0 1px rgb(0 0 0 / 40%);
    width: 100%;
    max-width: 512px;
    color: #222;
    background: #fff;
    border-radius: 5px;
    transition: none;
}

#blogpronto .kg-nft-card * {
    position: static;
}

#blogpronto .kg-nft-metadata {
    padding: 20px;
    width: 100%;
}

#blogpronto .kg-nft-image {
    border-radius: 5px 5px 0 0;
    width: 100%;
}

#blogpronto .kg-nft-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

#blogpronto .kg-nft-header h4.kg-nft-title {
    font-family: inherit;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3em;
    min-width: unset;
    max-width: unset;
    margin: 0;
    color: #222;
}

#blogpronto .kg-nft-opensea-logo {
    margin-top: 2px;
    width: 100px;
    object-fit: scale-down;
}

#blogpronto .kg-nft-creator {
    font-family: inherit;
    line-height: 1.4em;
    margin: 4px 0 0;
    color: #ababab;
}

#blogpronto .kg-nft-creator span {
    font-weight: 500;
    color: #222;
}

#blogpronto .kg-nft-card p.kg-nft-description {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4em;
    margin: 20px 0 0;
    color: #222;
}

/* 4.11. Product
/* ---------------------------------------------------------- */

#blogpronto .kg-product-card,
#blogpronto .kg-product-card * {
    box-sizing: border-box;
}

#blogpronto .kg-product-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin:  40px auto;
}

#blogpronto .kg-product-card-container {
    display: grid;
    grid-template-columns: auto min-content;
    align-items: center;
    grid-row-gap: 16px;
    background: transparent;
    max-width: 550px;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
    box-shadow: inset 0 0 0 1px rgb(124 139 154 / 25%);
}

#blogpronto .kg-product-card-image {
    grid-column: 1 / 3;
    justify-self: center;
}

#blogpronto .kg-product-card-title-container {
    grid-column: 1 / 2;
}

#blogpronto .kg-product-card h4.kg-product-card-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.15em;
}

#blogpronto .kg-product-card-description {
    grid-column: 1 / 3;
}

#blogpronto .kg-product-card .kg-product-card-description p,
#blogpronto .kg-product-card .kg-product-card-description ol,
#blogpronto .kg-product-card .kg-product-card-description ul {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 0.95em;
    line-height: 1.5em;
    opacity: .7;
    margin-bottom: 0;
}

#blogpronto .kg-product-card .kg-product-card-description p:first-of-type {
    margin-top: -4px;
}

#blogpronto .kg-product-card .kg-product-card-description p:not(:first-of-type),
#blogpronto .kg-product-card .kg-product-card-description ul,
#blogpronto .kg-product-card .kg-product-card-description ol {
    margin-top: 0.95em;
}

#blogpronto .kg-product-card .kg-product-card-description li+li {
    margin-top: 0.5em;
}

#blogpronto .kg-product-card-rating {
    display: flex;
    align-items: center;
    grid-column: 2 / 3;
    align-self: start;
    justify-self: end;
    padding-left: 16px;
}

@media (max-width: 400px) {
    #blogpronto .kg-product-card-title-container {
        grid-column: 1 / 3;
    }

    #blogpronto .kg-product-card-rating {
        grid-column: 1 / 3;
        justify-self: start;
        margin-top: -15px;
        padding-left: 0;
    }
}

#blogpronto .kg-product-card-rating-star {
    height: 28px;
    width: 20px;
}

#blogpronto .kg-product-card-rating-star svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    opacity: 0.15;
}

#blogpronto .kg-product-card-rating-active.kg-product-card-rating-star svg {
    opacity: 1;
}

#blogpronto .kg-product-card a.kg-product-card-button {
    justify-content: center;
    grid-column: 1 / 3;
    display: flex;
    position: static;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 0.95em;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
    width: 100%;
    height: 2.4em;
    border-radius: 5px;
    padding: 0 1.2em;
    transition: opacity 0.2s ease-in-out;
}

#blogpronto .kg-product-card a.kg-product-card-btn-accent {
    background-color: var(--ghost-accent-color);
    color: #fff;
}

/* 4.12. Toggle
/* ---------------------------------------------------------- */

#blogpronto .kg-toggle-card,
#blogpronto .kg-toggle-card * {
    box-sizing: border-box;
}

#blogpronto .kg-toggle-card {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(124, 139, 154, 0.25);
    border-radius: 4px;
    padding: 1.2em;
}

#blogpronto .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content{
    height: 0;
    overflow: hidden;
    transition: opacity .5s ease, top .35s ease;
    opacity: 0;
    top: -0.5em;
    position: relative;
}

#blogpronto .kg-toggle-content {
    height: auto;
    opacity: 1;
    transition: opacity 1s ease, top .35s ease;
    top: 0;
    position: relative;
}

#blogpronto .kg-toggle-card[data-kg-toggle-state="close"] svg {
    transform: unset;
}

#blogpronto .kg-toggle-heading {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

#blogpronto .kg-toggle-card h4.kg-toggle-heading-text {
    font-size: 1.15em;
    font-weight: 700;
    line-height: 1.3em;
    margin-top: 0;
    margin-bottom: 0;
}

#blogpronto .kg-toggle-content p:first-of-type {
    margin-top: 0.5em;
}

#blogpronto .kg-toggle-card .kg-toggle-content p,
#blogpronto .kg-toggle-card .kg-toggle-content ol,
#blogpronto .kg-toggle-card .kg-toggle-content ul {
    font-size: 0.95em;
    line-height: 1.5em;
    margin-top: 0.95em;
    margin-bottom: 0;
}

#blogpronto .kg-toggle-card li + li {
    margin-top: 0.5em;
}

#blogpronto .kg-toggle-card-icon {
    height: 24px;
    width: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1em;
    background: none;
    border: 0;
}

#blogpronto .kg-toggle-heading svg {
    width: 14px;
    color: rgba(124, 139, 154, 0.5);
    transition: all 0.3s;
    transform: rotate(-180deg);
}

#blogpronto .kg-toggle-heading path {
    fill: none;
    stroke: currentcolor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
    fill-rule: evenodd;
}

#blogpronto .kg-toggle-card + .kg-toggle-card {
    margin-top: 1em;
}

/* 4.13. Video
/* ---------------------------------------------------------- */

#blogpronto .kg-video-card,
#blogpronto .kg-video-card * {
    box-sizing: border-box;
}

#blogpronto .kg-video-card {
    position: relative;
    --seek-before-width: 0%;
    --volume-before-width: 100%;
    --buffered-width: 0%;
}

#blogpronto .kg-video-card video {
    display: block;
    max-width: 100%;
    height: auto;
}

#blogpronto .kg-video-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#blogpronto .kg-video-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(180deg,rgba(0,0,0,0.3) 0,transparent 70%,transparent 100%);
    z-index: 999;
    transition: opacity .2s ease-in-out;
}

#blogpronto .kg-video-large-play-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    padding: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: opacity .2s ease-in-out;
}

#blogpronto .kg-video-large-play-icon svg {
    width: 20px;
    height: auto;
    margin-left: 2px;
    fill: #fff;
}

#blogpronto .kg-video-player-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.5));
    z-index: 999;
    transition: opacity .2s ease-in-out;

}

#blogpronto .kg-video-player {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 9999;
    padding: 12px 16px;
}

#blogpronto .kg-video-current-time {
    min-width: 38px;
    padding: 0 4px;
    color: #fff;
    font-family: inherit;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.4em;
    white-space: nowrap;
}

#blogpronto .kg-video-time {
    color: rgba(255, 255, 255, 0.6);
    font-family: inherit;
    font-size: .85em;
    font-weight: 500;
    line-height: 1.4em;
    white-space: nowrap;
}

#blogpronto .kg-video-duration {
    padding: 0 4px;
}

#blogpronto .kg-video-play-icon,
#blogpronto .kg-video-pause-icon {
    position: relative;
    padding: 0px 4px 0 0;
    font-size: 0;
    background: transparent;
}

#blogpronto .kg-video-hide {
    display: none !important;
}

#blogpronto .kg-video-hide-animated {
    opacity: 0 !important;
    transition: opacity .2s ease-in-out;
    cursor: initial;
}

#blogpronto .kg-video-play-icon svg,
#blogpronto .kg-video-pause-icon svg {
    width: 14px;
    height: 14px;
    fill: #fff;
}

#blogpronto .kg-video-seek-slider {
    flex-grow: 1;
    margin: 0 4px;
}

@media (max-width: 520px) {
    #blogpronto .kg-video-seek-slider {
        display: none;
    }
}

#blogpronto .kg-video-playback-rate {
    min-width: 37px;
    padding: 0 4px;
    color: #fff;
    font-family: inherit;
    font-size: .85em;
    font-weight: 600;
    line-height: 1.4em;
    text-align: left;
    background: transparent;
    white-space: nowrap;
}

@media (max-width: 520px) {
    #blogpronto .kg-video-playback-rate {
        padding-left: 8px;
    }
}

#blogpronto .kg-video-mute-icon,
#blogpronto .kg-video-unmute-icon {
    position: relative;
    bottom: -1px;
    padding: 0 4px;
    font-size: 0;
    background: transparent;
}

@media (max-width: 520px) {
    #blogpronto .kg-video-mute-icon,
    #blogpronto .kg-video-unmute-icon  {
        margin-left: auto;
    }
}

#blogpronto .kg-video-mute-icon svg,
#blogpronto .kg-video-unmute-icon svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

#blogpronto .kg-video-volume-slider {
    width: 80px;
}

@media (max-width: 300px) {
    #blogpronto .kg-video-volume-slider {
        display: none;
    }
}

#blogpronto .kg-video-seek-slider::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--seek-before-width) !important;
    height: 4px;
    cursor: pointer;
    background-color: #EBEEF0;
    border-radius: 2px;
}

#blogpronto .kg-video-volume-slider::before {
    content: "";
    position: absolute;
    left: 0;
    width: var(--volume-before-width) !important;
    height: 4px;
    cursor: pointer;
    background-color: #EBEEF0;
    border-radius: 2px;
}

/* Resetting browser styles
/* --------------------------------------------------------------- */

#blogpronto .kg-video-card input[type=range] {
    position: relative;
    -webkit-appearance: none;
    background: transparent;
}

#blogpronto .kg-video-card input[type=range]:focus {
    outline: none;
}

#blogpronto .kg-video-card input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
}

#blogpronto .kg-video-card input[type=range]::-ms-track {
    cursor: pointer;
    border-color: transparent;
    color: transparent;
    background: transparent;
}

#blogpronto .kg-video-card button {
    display: flex;
    align-items: center;
    border: 0;
    cursor: pointer;
}

#blogpronto .kg-video-card input[type="range"] {
    height: auto;
    padding: 0;
    border: 0;
}

/* Chrome & Safari styles
/* --------------------------------------------------------------- */

#blogpronto .kg-video-card input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

#blogpronto .kg-video-card input[type="range"]::-webkit-slider-thumb {
    position: relative;
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    margin: -5px 0 0 0;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-video-card input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.2);
}

/* Firefox styles
/* --------------------------------------------------------------- */

#blogpronto .kg-video-card input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

#blogpronto .kg-video-card input[type="range"]::-moz-range-progress {
    background: #EBEEF0;
    border-radius: 2px;
}

#blogpronto .kg-video-card input[type="range"]::-moz-range-thumb {
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-video-card input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.2);
}

/* Edge & IE styles
/* --------------------------------------------------------------- */

#blogpronto .kg-video-card input[type="range"]::-ms-track {
    width: 100%;
    height: 3px;
    border: solid transparent;
    color: transparent;
    cursor: pointer;
    background: transparent;
}

#blogpronto .kg-video-card input[type="range"]::-ms-fill-lower {
    background: #fff;
}

#blogpronto .kg-video-card input[type="range"]::-ms-fill-upper {
    background: #EBEEF0;
}

#blogpronto .kg-video-card input[type="range"]::-ms-thumb {
    box-sizing: content-box;
    width: 13px;
    height: 13px;
    border: 0;
    cursor: pointer;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,0.24);
}

#blogpronto .kg-video-card input[type="range"]:active::-ms-thumb {
    transform: scale(1.2);
}



/* 7. Author Template
/* ---------------------------------------------------------- */

#blogpronto .author-profile-pic {
    display: block;
    width: 80px;
    height: 80px;
    object-fit: cover;
    margin: 0 0 2rem;
    background: color-mod(#f1f1f1 l(+10%));
    border-radius: 50%;
}

#blogpronto .author-profile-footer {
    margin-top: 16px;
}

#blogpronto .author-profile-location {
    font-weight: 700;
}

#blogpronto .author-profile-meta {
    display: flex;
    gap: 10px;
}

#blogpronto .author-profile-social-link {
    font-size: 1.3rem;
    color: #979797;
}

#blogpronto .author-profile-social-link svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 1001px) {
    #blogpronto .author-template .post-card-large .post-card-content:only-child {
        grid-column: span 2;
        max-width: 640px;
    }
}


/* 8. Tag Template
/* ---------------------------------------------------------- */

#blogpronto .tag-template .post-card-large .post-card-image-link {
    grid-column: 2 / span 2;
    order: 2;
}

#blogpronto .tag-template .post-card-large .post-card-content {
    order: 1;
}

@media (min-width: 1001px) {
    #blogpronto .tag-template .post-card-large .post-card-content:only-child {
        grid-column: span 2;
        max-width: 640px;
    }
}

/* 9. Error Template
/* ---------------------------------------------------------- */

#blogpronto .error-content {
    padding: 14vw 4vw 2vw;
}

#blogpronto .error-message {
    padding-bottom: 10vw;
    text-align: center;
}

#blogpronto .error-code {
    margin: 0;
    font-size: 12vw;
    line-height: 1em;
    letter-spacing: -5px;
}

#blogpronto .error-description {
    margin: 0;
    color: #979797;
    font-size: 3.2rem;
    line-height: 1.3em;
    letter-spacing: -0.005em;
    font-weight: 400;
}

#blogpronto .error-link {
    display: inline-block;
    margin-top: 5px;
}

@media (min-width: 940px) {
    #blogpronto .error-content .post-card {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }
}

@media (max-width: 800px) {
    #blogpronto .error-content {
        padding-top: 24vw;
    }
    #blogpronto .error-code {
        font-size: 11.2rem;
    }
    #blogpronto .error-message {
        padding-bottom: 16vw;
    }
    #blogpronto .error-description {
        margin: 5px 0 0 0;
        font-size: 1.8rem;
    }
}

@media (max-width: 500px) {
    #blogpronto .error-content {
        padding-top: 28vw;
    }
    #blogpronto .error-message {
        padding-bottom: 14vw;
    }
}


/*

Hey! You reached the end.

Hope you enjoyed this CSS file, if you have any suggestions
for improvements that might be useful for everyone who uses
this theme, you can find the open source repository for it
here: https://github.com/tryghost/casper

Or, if you've just scrolled all the way to the bottom of the
file to add some of your own styles. Well, you've come to
the right place. Onward!

 */