@charset "UTF-8";
                            /*!
  Theme Name: CSS-Tricks v17
  Theme URI: http://css-tricks.com/
  Description: The Theme for CSS-Tricks
  Author: Chris Coyier
  Version: 17
*/

                            *,
                             ::after,
                             ::before {
                                -webkit-box-sizing: border-box;
                                box-sizing: border-box
                            }

                            a {
                                text-decoration: none
                            }

                            article,
                            aside,
                            details,
                            figcaption,
                            figure,
                            footer,
                            header,
                            hgroup,
                            nav,
                            section,
                            summary {
                                display: block
                            }

                            audio,
                            canvas,
                            video {
                                display: inline-block
                            }

                            audio:not([controls]) {
                                display: none;
                                height: 0
                            }

                            [hidden] {
                                display: none
                            }

                            html {
                                -webkit-text-size-adjust: 100%;
                                -ms-text-size-adjust: 100%;
                                margin: 0;
                                padding: 0
                            }

                            body {
                                margin: 0
                            }

                            dl,
                            menu,
                            ol,
                            ul {
                                margin: 0;
                                list-style: none
                            }

                            dd {
                                margin: 0
                            }

                            menu,
                            ol,
                            ul {
                                padding: 0
                            }

                            nav ol,
                            nav ul {
                                list-style: none;
                                list-style-image: none
                            }

                            img {
                                border: 0;
                                -ms-interpolation-mode: bicubic
                            }

                            figure {
                                margin: 0
                            }

                            form {
                                margin: 0
                            }

                            legend {
                                border: 0;
                                padding: 0;
                                white-space: normal
                            }

                            button,
                            input,
                            select,
                            textarea {
                                font-size: 100%;
                                margin: 0;
                                vertical-align: baseline
                            }

                            button,
                            input {
                                line-height: normal
                            }

                            button,
                            html input[type=button],
                            input[type=reset],
                            input[type=submit] {
                                -webkit-appearance: button;
                                cursor: pointer
                            }

                            button[disabled],
                            input[disabled] {
                                cursor: default
                            }

                            input[type=checkbox],
                            input[type=radio] {
                                padding: 0
                            }

                            input[type=search] {
                                -webkit-appearance: textfield
                            }

                            input[type=search]::-webkit-search-cancel-button,
                            input[type=search]::-webkit-search-decoration {
                                -webkit-appearance: none
                            }

                            button::-moz-focus-inner,
                            input::-moz-focus-inner {
                                border: 0;
                                padding: 0
                            }

                            textarea {
                                overflow: auto;
                                vertical-align: top
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table {
                                font-size: .75rem;
                                border-collapse: collapse;
                                border-spacing: 0;
                                width: 100%;
                                margin: 0 0 1rem 0;
                                table-layout: fixed
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table thead th {
                                border: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table thead tr:first-child th:first-child {
                                border-top-left-radius: 8px
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table thead tr:first-child th:last-child {
                                border-top-right-radius: 8px
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table td,
                            body:not(.woocommerce-page):not(.page-template-page-search-results) table th {
                                padding: 1rem
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table th {
                                text-align: left;
                                background: #333334;
                                color: #fff
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr:nth-child(odd) {
                                background: #fff
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr:nth-child(even) {
                                background: #f5f5f5
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr:first-child th {
                                border-top: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr:last-child td {
                                border-bottom: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr td:first-child,
                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr th:first-child {
                                border-left: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr td:last-child,
                            body:not(.woocommerce-page):not(.page-template-page-search-results) table tr th:last-child {
                                border-right: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results).overflow-table body:not(.woocommerce-page):not(.page-template-page-search-results).overflow-table td {
                                white-space: nowrap!important
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) .overflow-table-wrap {
                                overflow-x: scroll
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) .overflow-table-wrap>table.overflow-table:not(.gsc-table-result):not(.gcsc-branding):not(.gsc-resultsHeader) {
                                width: auto!important;
                                min-width: 100%;
                                table-layout: auto!important;
                                margin: 0
                            }

                            body:not(.woocommerce-page):not(.page-template-page-search-results) .overflow-table-wrap>table.overflow-table:not(.gsc-table-result):not(.gcsc-branding):not(.gsc-resultsHeader) table {
                                table-layout: auto!important;
                                width: 100%!important;
                                margin: 0
                            }

                            table.leave-alone {
                                table-layout: auto!important
                            }

                            table.leave-alone tr {
                                background: 0 0!important
                            }

                            .on-light {
                                background: #fff;
                                color: #2e2f3e
                            }

                            .on-light .article-content {
                                color: #2e2f3e
                            }

                            .on-light a {
                                color: #03a9f4
                            }

                            .on-light a:focus,
                            .on-light a:hover {
                                text-decoration: underline;
                                -webkit-text-decoration-color: #ccc;
                                text-decoration-color: #ccc
                            }

                            .header-breadcrumbs .on-light .breadcrumb_last,
                            .on-light .header-breadcrumbs .breadcrumb_last,
                            .on-light h1,
                            .on-light h2,
                            .on-light h3,
                            .on-light h4,
                            .on-light h5,
                            .on-light h6 {
                                color: #14151f
                            }

                            .header-breadcrumbs .on-light .breadcrumb_last a,
                            .on-light .header-breadcrumbs .breadcrumb_last a,
                            .on-light h1 a,
                            .on-light h2 a,
                            .on-light h3 a,
                            .on-light h4 a,
                            .on-light h5 a,
                            .on-light h6 a {
                                color: #14151f
                            }

                            .on-light pre {
                                background: #001628
                            }

                            html {
                                font-family: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                                font-size: 20px;
                                font-weight: 400;
                                line-height: 1.35
                            }

                            @media (max-width:1200px) {
                                html {
                                    font-size: 18px
                                }
                            }

                            @media (max-width:1200px) {
                                html {
                                    font-size: 16px
                                }
                            }

                             ::selection {
                                background: #9c27b0;
                                color: #fff
                            }

                            a {
                                color: #fff
                            }

                            a:not(.button):not(.commentPreviewButton):not(.comment-reply-link):focus,
                            a:not(.button):not(.commentPreviewButton):not(.comment-reply-link):hover {}

                            .is-dark a:focus,
                            .is-dark a:hover {
                                color: #92dcfe
                            }

                            .header-breadcrumbs .breadcrumb_last,
                            h1,
                            h2,
                            h3,
                            h4,
                            h5,
                            h6 {}

                            .header-breadcrumbs .breadcrumb_last a,
                            h1 a,
                            h2 a,
                            h3 a,
                            h4 a,
                            h5 a,
                            h6 a {
                                color: inherit;
                                border: 0;
                                display: inline-block
                            }

                            .header-breadcrumbs .breadcrumb_last a:focus,
                            .header-breadcrumbs .breadcrumb_last a:hover,
                            h1 a:focus,
                            h1 a:hover,
                            h2 a:focus,
                            h2 a:hover,
                            h3 a:focus,
                            h3 a:hover,
                            h4 a:focus,
                            h4 a:hover,
                            h5 a:focus,
                            h5 a:hover,
                            h6 a:focus,
                            h6 a:hover {
                                color: #03a9f4
                            }

                            .header-breadcrumbs .breadcrumb_last a:focus .shape-arrow-right,
                            .header-breadcrumbs .breadcrumb_last a:hover .shape-arrow-right,
                            h1 a:focus .shape-arrow-right,
                            h1 a:hover .shape-arrow-right,
                            h2 a:focus .shape-arrow-right,
                            h2 a:hover .shape-arrow-right,
                            h3 a:focus .shape-arrow-right,
                            h3 a:hover .shape-arrow-right,
                            h4 a:focus .shape-arrow-right,
                            h4 a:hover .shape-arrow-right,
                            h5 a:focus .shape-arrow-right,
                            h5 a:hover .shape-arrow-right,
                            h6 a:focus .shape-arrow-right,
                            h6 a:hover .shape-arrow-right {
                                -webkit-transform: translateX(5px) rotate(-45deg);
                                transform: translateX(5px) rotate(-45deg)
                            }

                            .header-breadcrumbs .breadcrumb_last .shape-arrow-right,
                            h1 .shape-arrow-right,
                            h2 .shape-arrow-right,
                            h3 .shape-arrow-right,
                            h4 .shape-arrow-right,
                            h5 .shape-arrow-right,
                            h6 .shape-arrow-right {
                                width: 18px;
                                height: 18px;
                                -webkit-transition: .2s;
                                transition: .2s
                            }

                            @media (max-width:800px) {
                                .header-breadcrumbs .breadcrumb_last .shape-arrow-right,
                                h1 .shape-arrow-right,
                                h2 .shape-arrow-right,
                                h3 .shape-arrow-right,
                                h4 .shape-arrow-right,
                                h5 .shape-arrow-right,
                                h6 .shape-arrow-right {
                                    width: 13px;
                                    height: 13px
                                }
                            }

                            .header-breadcrumbs .breadcrumb_last .shape-link,
                            h1 .shape-link,
                            h2 .shape-link,
                            h3 .shape-link,
                            h4 .shape-link,
                            h5 .shape-link,
                            h6 .shape-link {
                                fill: #ccc;
                                vertical-align: bottom;
                                width: 24px;
                                height: 24px;
                                position: relative;
                                top: 1px
                            }

                            @media (max-width:800px) {
                                .header-breadcrumbs .breadcrumb_last .shape-link,
                                h1 .shape-link,
                                h2 .shape-link,
                                h3 .shape-link,
                                h4 .shape-link,
                                h5 .shape-link,
                                h6 .shape-link {
                                    width: 20px;
                                    height: 20px;
                                    top: 3px;
                                    left: 1px
                                }
                            }

                            .article-content .header-breadcrumbs .breadcrumb_last,
                            .article-content h1,
                            .article-content h2,
                            .article-content h3,
                            .article-content h4,
                            .article-content h5,
                            .article-content h6,
                            .header-breadcrumbs .article-content .breadcrumb_last {
                                padding: var(--nav-height) 0 0 0
                            }

                            .article-content .header-breadcrumbs .breadcrumb_last a,
                            .article-content h1 a,
                            .article-content h2 a,
                            .article-content h3 a,
                            .article-content h4 a,
                            .article-content h5 a,
                            .article-content h6 a,
                            .header-breadcrumbs .article-content .breadcrumb_last a {
                                color: #03a9f4
                            }

                            .h1,
                            .header-breadcrumbs .breadcrumb_last,
                            h1 {}

                            @media (max-width:1200px) {
                                .h1,
                                .header-breadcrumbs .breadcrumb_last,
                                h1 {
                                    font-size: 42px
                                }
                            }

                            @media (max-width:800px) {
                                .h1,
                                .header-breadcrumbs .breadcrumb_last,
                                h1 {
                                    font-size: 32px
                                }
                            }

                            .h2,
                            h2 {}

                            @media (max-width:1200px) {
                                .h2,
                                h2 {
                                    font-size: 30px
                                }
                            }

                            @media (max-width:800px) {
                                .h2,
                                h2 {
                                    font-size: 26px
                                }
                            }

                            .h3,
                            h3 {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-size: 32px;
                                font-weight: 700
                            }

                            @media (max-width:1200px) {
                                .h3,
                                h3 {
                                    font-size: 30px
                                }
                            }

                            @media (max-width:800px) {
                                .h3,
                                h3 {
                                    font-size: 26px
                                }
                            }

                            .h4,
                            h4 {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-weight: 700;
                                font-size: 22px;
                                margin: 0 0 .8rem 0
                            }

                            @media (max-width:1200px) {
                                .h4,
                                h4 {
                                    font-size: 20px
                                }
                            }

                            @media (max-width:800px) {
                                .h4,
                                h4 {
                                    font-size: 18px
                                }
                            }

                            .h5,
                            h5 {
                                font-size: 1rem;
                                font-weight: 800;
                                margin: 0 0 .5rem 0
                            }

                            h6 {
                                font-size: 1rem;
                                font-weight: 400
                            }

                            .h4,
                            .h5,
                            .h6,
                            h4,
                            h5,
                            h6 {
                                line-height: 1.05
                            }

                            .subhead {
                                font-size: 75%;
                                margin: 0 0 .25rem;
                                color: #939393
                            }

                            .header-tag {
                                text-transform: uppercase;
                                font-size: 26px;
                                color: #fff;
                                text-transform: uppercase;
                                font-weight: 700;
                                white-space: nowrap;
                                border: 3px solid #28242f;
                                border-radius: 2rem;
                                padding: .3rem .85rem .35rem .85rem;
                                vertical-align: middle
                            }

                            .article-content ol,
                            .article-content ul,
                            .bbp-reply-content ol,
                            .bbp-reply-content ul,
                            .comment-content ol,
                            .comment-content ul,
                            .text ol,
                            .text ul {
                                margin: 0 0 1rem 1.5rem
                            }

                            aside .article-content ol,
                            aside .article-content ul,
                            aside .bbp-reply-content ol,
                            aside .bbp-reply-content ul,
                            aside .comment-content ol,
                            aside .comment-content ul,
                            aside .text ol,
                            aside .text ul {
                                margin-left: 1rem
                            }

                            .article-content ol li,
                            .article-content ul li,
                            .bbp-reply-content ol li,
                            .bbp-reply-content ul li,
                            .comment-content ol li,
                            .comment-content ul li,
                            .text ol li,
                            .text ul li {
                                text-indent: -1.5rem
                            }

                            .article-content ol ul,
                            .article-content ul,
                            .article-content ul ul,
                            .bbp-reply-content ol ul,
                            .bbp-reply-content ul,
                            .bbp-reply-content ul ul,
                            .comment-content ol ul,
                            .comment-content ul,
                            .comment-content ul ul,
                            .text ol ul,
                            .text ul,
                            .text ul ul {
                                list-style: none
                            }

                            .article-content ol ul li::before,
                            .article-content ul li::before,
                            .article-content ul ul li::before,
                            .bbp-reply-content ol ul li::before,
                            .bbp-reply-content ul li::before,
                            .bbp-reply-content ul ul li::before,
                            .comment-content ol ul li::before,
                            .comment-content ul li::before,
                            .comment-content ul ul li::before,
                            .text ol ul li::before,
                            .text ul li::before,
                            .text ul ul li::before {
                                content: "•";
                                margin: 0 1rem 0 0;
                                color: #b1b1b1
                            }

                            .article-content ol,
                            .article-content ol ol,
                            .article-content ul ol,
                            .bbp-reply-content ol,
                            .bbp-reply-content ol ol,
                            .bbp-reply-content ul ol,
                            .comment-content ol,
                            .comment-content ol ol,
                            .comment-content ul ol,
                            .text ol,
                            .text ol ol,
                            .text ul ol {
                                list-style: none;
                                counter-reset: my-awesome-counter
                            }

                            .article-content ol ol>li,
                            .article-content ol>li,
                            .article-content ul ol>li,
                            .bbp-reply-content ol ol>li,
                            .bbp-reply-content ol>li,
                            .bbp-reply-content ul ol>li,
                            .comment-content ol ol>li,
                            .comment-content ol>li,
                            .comment-content ul ol>li,
                            .text ol ol>li,
                            .text ol>li,
                            .text ul ol>li {
                                counter-increment: my-awesome-counter
                            }

                            .article-content ol ol>li::before,
                            .article-content ol>li::before,
                            .article-content ul ol>li::before,
                            .bbp-reply-content ol ol>li::before,
                            .bbp-reply-content ol>li::before,
                            .bbp-reply-content ul ol>li::before,
                            .comment-content ol ol>li::before,
                            .comment-content ol>li::before,
                            .comment-content ul ol>li::before,
                            .text ol ol>li::before,
                            .text ol>li::before,
                            .text ul ol>li::before {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                content: counter(my-awesome-counter);
                                color: #b1b1b1;
                                font-weight: 700;
                                margin: 0 1rem 0 0
                            }

                            .article-content ol ol,
                            .article-content ol ul,
                            .article-content ul ol,
                            .article-content ul ul,
                            .bbp-reply-content ol ol,
                            .bbp-reply-content ol ul,
                            .bbp-reply-content ul ol,
                            .bbp-reply-content ul ul,
                            .comment-content ol ol,
                            .comment-content ol ul,
                            .comment-content ul ol,
                            .comment-content ul ul,
                            .text ol ol,
                            .text ol ul,
                            .text ul ol,
                            .text ul ul {
                                margin: 5px 0 0 1rem
                            }

                            .article-content li,
                            .bbp-reply-content li,
                            .comment-content li,
                            .text li {
                                margin: 0 0 5px 0
                            }

                            .article-content li p,
                            .bbp-reply-content li p,
                            .comment-content li p,
                            .text li p {
                                margin: 5px 0 5px 0
                            }

                            .article-content h3.has-header-link,
                            .article-content h4.has-header-link,
                            .bbp-reply-content h3.has-header-link,
                            .bbp-reply-content h4.has-header-link,
                            .comment-content h3.has-header-link,
                            .comment-content h4.has-header-link,
                            .text h3.has-header-link,
                            .text h4.has-header-link {
                                position: relative
                            }

                            .article-content h3.has-header-link .article-headline-link,
                            .article-content h4.has-header-link .article-headline-link,
                            .bbp-reply-content h3.has-header-link .article-headline-link,
                            .bbp-reply-content h4.has-header-link .article-headline-link,
                            .comment-content h3.has-header-link .article-headline-link,
                            .comment-content h4.has-header-link .article-headline-link,
                            .text h3.has-header-link .article-headline-link,
                            .text h4.has-header-link .article-headline-link {
                                font-family: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                display: inline-block;
                                margin-right: .25rem;
                                text-decoration: none
                            }

                            .article-content hr,
                            .bbp-reply-content hr,
                            .comment-content hr,
                            .text hr {
                                background-image: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to right, #ff8a00, #da1b60);
                                border: 0;
                                display: block;
                                width: 100%;
                                height: 4px;
                                border-radius: 4px;
                                margin: 2rem 0
                            }

                            .site-section-title {
                                text-align: center;
                                padding: 50px 0 5px
                            }

                            time {
                                color: #7a7a8c
                            }

                            abbr[title] {
                                border-bottom: 1px dotted;
                                text-decoration: none
                            }

                            b,
                            strong {
                                font-weight: 700
                            }

                            blockquote {
                                font-size: 1.1rem;
                                margin: 0 0 1rem 0;
                                padding: .25rem 0 .25rem 1.5rem;
                                position: relative
                            }

                            blockquote p:last-child {
                                margin: 0
                            }

                            blockquote:not(.page-intro-p)::before {
                                content: "";
                                left: 0;
                                top: 0;
                                position: absolute;
                                height: 100%;
                                width: 4px;
                                background: #c2c2c2;
                                border-radius: 4px
                            }

                            blockquote cite {
                                display: block
                            }

                            blockquote,
                            blockquote p {
                                max-width: 900px
                            }

                            body.single article p:first-of-type.explanation {
                                display: block;
                                font-style: normal
                            }

                            body.single article p:first-of-type.explanation::before {
                                content: "<editor_intro>";
                                margin: 0 0 4px 0
                            }

                            body.single article p:first-of-type.explanation::after {
                                content: "</editor_intro>";
                                margin: 6px 0 0 0
                            }

                            body.single article p:first-of-type.explanation::after,
                            body.single article p:first-of-type.explanation::before {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                display: block;
                                text-transform: uppercase;
                                color: #ccc;
                                font-size: .6rem;
                                letter-spacing: .05rem
                            }

                            .article-content p:not(:first-of-type).explanation {
                                padding: 1rem 2rem;
                                border: 10px solid #100e17;
                                border-radius: 16px;
                                position: relative;
                                background: -webkit-gradient(linear, left top, right top, from(rgba(218, 27, 96, .25)), to(rgba(255, 138, 0, .25)));
                                background: linear-gradient(to right, rgba(218, 27, 96, .25), rgba(255, 138, 0, .25))
                            }

                            .article-content p:not(:first-of-type).explanation::before {
                                content: "";
                                position: absolute;
                                top: -10px;
                                left: -10px;
                                right: -10px;
                                bottom: -10px;
                                border: 1px solid #da1b60;
                                border-radius: 8px;
                                pointer-events: none
                            }

                            .article-content p:not(:first-of-type).explanation::after {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                content: "Hey!";
                                text-transform: uppercase;
                                color: #fff;
                                font-weight: 700;
                                top: -19px;
                                left: 1rem;
                                background: #100e17;
                                padding: 0 .5rem;
                                font-size: .6rem;
                                position: absolute;
                                z-index: 1
                            }

                            .on-light .article-content p:not(:first-of-type).explanation {
                                background: -webkit-gradient(linear, left top, right top, from(#fce4ed), to(#ffe8cc));
                                background: linear-gradient(to right, #fce4ed, #ffe8cc);
                                border: 10px solid #fff
                            }

                            .on-light .article-content p:not(:first-of-type).explanation::after {
                                color: #000;
                                background: #fff
                            }

                            article div.explanation {
                                margin: 0 0 1rem 0
                            }

                            body.home .explanation {
                                font-style: normal
                            }

                            dfn {
                                font-style: italic
                            }

                            mark {
                                background: #ff0;
                                color: #000
                            }

                            figure,
                            p,
                            pre {
                                margin: 0 0 1rem 0
                            }

                            pre {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                clear: both;
                                color: #fff;
                                background: rgba(32, 28, 41, .75);
                                padding: 0;
                                -moz-tab-size: 2;
                                -o-tab-size: 2;
                                tab-size: 2;
                                -ms-word-break: normal;
                                word-break: normal;
                                word-break: normal;
                                -webkit-hyphens: none;
                                -ms-hyphens: none;
                                hyphens: none;
                                position: relative;
                                line-height: 28px;
                                border-radius: 8px;
                                min-width: 100px;
                                max-width: 100%;
                                overflow: hidden
                            }

                            pre[rel] {
                                padding-top: 20px
                            }

                            pre[rel]::before {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-weight: 700;
                                font-size: 12px;
                                content: attr(rel);
                                color: #fff;
                                position: absolute;
                                top: .33rem;
                                left: .52rem;
                                width: 100%;
                                padding: 0
                            }

                            pre[rel=CSS]::before,
                            pre[rel=SCSS]::before {
                                color: #ff8a00
                            }

                            pre[rel=HTML]::before {
                                color: #4caf50
                            }

                            pre[rel=JSX]::before,
                            pre[rel=JavaScript]::before,
                            pre[rel=jQuery]::before {
                                color: #03a9f4
                            }

                            pre code {
                                font-size: 16px;
                                line-height: 1.75;
                                background: 0 0;
                                padding: 30px;
                                white-space: pre;
                                -webkit-overflow-scrolling: touch;
                                display: block;
                                overflow-x: scroll;
                                max-width: 100%;
                                min-width: 100px;
                                scrollbar-color: #666;
                                scrollbar-width: .5em
                            }

                            pre code::-webkit-scrollbar {
                                width: .5em;
                                height: .5em
                            }

                            pre code::-webkit-scrollbar-thumb {
                                background: #666;
                                border-radius: .5em;
                                -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                            }

                            pre code::-webkit-scrollbar-track {
                                background: linear-gradient(to right, #201c29, #201c29 1px, none 1px, none)
                            }

                            code {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace
                            }

                            .line-highlight {
                                position: absolute;
                                left: 0;
                                right: 0;
                                line-height: inherit;
                                padding: inherit 0;
                                margin-top: 50px;
                                background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 235, 59, .25)), to(rgba(255, 235, 59, 0)));
                                background: linear-gradient(to right, rgba(255, 235, 59, .25) 50%, rgba(255, 235, 59, 0));
                                pointer-events: none;
                                white-space: pre;
                                mix-blend-mode: color-dodge
                            }

                            dd>code,
                            li:not(.comment):not([data-category])>code,
                            p>code,
                            td>code {
                                font-size: 90%;
                                overflow-wrap: break-word;
                                word-wrap: break-word;
                                padding: .1rem .3rem .2rem;
                                border-radius: .2rem;
                                background: #201b29
                            }

                            .on-light dd>code,
                            .on-light li:not(.comment):not([data-category])>code,
                            .on-light p>code,
                            .on-light td>code {
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                background: -webkit-gradient(linear, left top, right top, from(#fce4ed), to(#ffe8cc));
                                background: linear-gradient(to right, #fce4ed, #ffe8cc)
                            }

                            small {
                                font-size: 75%
                            }

                            sub,
                            sup {
                                font-size: 75%;
                                line-height: 0;
                                position: relative;
                                vertical-align: baseline
                            }

                            sup {
                                top: -.5em
                            }

                            sub {
                                bottom: -.25em
                            }

                            hr.thick {
                                border: 0;
                                height: 5px;
                                margin: 4rem 0;
                                background-image: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to right, #ff8a00, #da1b60);
                                border-radius: 5px
                            }

                            hr.squiggle {
                                border: 0;
                                height: 5px;
                                width: 100%;
                                background: url(images/squiggle.svg) repeat-x
                            }

                            .CommentForm .comment-content a,
                            .bold-underline-links a,
                            .comment ul .comment-content a,
                            .commentlist .comment-content a {
                                white-space: nowrap;
                                position: relative;
                                font-weight: 700
                            }

                            .CommentForm .comment-content a::after,
                            .bold-underline-links a::after,
                            .comment ul .comment-content a::after,
                            .commentlist .comment-content a::after {
                                content: "";
                                height: 2px;
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                width: 100%;
                                position: absolute;
                                bottom: -2px;
                                left: 0;
                                border-radius: 2px
                            }

                            .white-underline-links a {
                                position: relative;
                                font-weight: 700
                            }

                            .white-underline-links a::after {
                                content: "";
                                height: 2px;
                                background: #fff;
                                width: 100%;
                                position: absolute;
                                bottom: -2px;
                                left: 0;
                                border-radius: 2px
                            }

                            .white-underline-links a:focus,
                            .white-underline-links a:hover {
                                color: inherit!important;
                                -webkit-text-fill-color: inherit!important
                            }

                            .white-underline-links a:focus::after,
                            .white-underline-links a:hover::after {
                                -webkit-transform: translateY(1px);
                                transform: translateY(1px)
                            }

                            .page-intro-p {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                color: #c2c2c2;
                                max-width: 600px;
                                text-shadow: 1px 1px 3px #201c29
                            }

                            .page-intro-p cite {
                                font-style: normal;
                                text-decoration: none
                            }

                            .page-intro-p cite a {
                                color: #f5f5f5
                            }

                            @media (max-width:800px) {
                                .page-intro-p {
                                    font-size: .9rem;
                                    width: 90%
                                }
                            }

                            blockquote.page-intro-p {
                                padding: 0
                            }

                            .feature-comments.unbury,
                            .feature-comments.unfeature {
                                display: none
                            }

                            .feature-comments {
                                cursor: pointer
                            }

                            .featured.feature-comments.feature {
                                display: none
                            }

                            .featured.feature-comments.unfeature {
                                display: inline
                            }

                            .buried.feature-comments.bury {
                                display: none
                            }

                            .buried.feature-comments.unbury {
                                display: inline
                            }

                            #the-comment-list tr.featured {
                                background-color: #dfd
                            }

                            #the-comment-list tr.buried {
                                opacity: .5
                            }

                            #bbpress-forums .featured-replies.unbury,
                            #bbpress-forums .featured-replies.unfeature,
                            .featured-replies.unbury,
                            .featured-replies.unfeature {
                                display: none
                            }

                            #bbpress-forums .featured-replies,
                            .featured-replies {
                                cursor: pointer
                            }

                            #bbpress-forums .featured.featured-replies.feature,
                            .featured.featured-replies.feature {
                                display: none
                            }

                            #bbpress-forums .featured.featured-replies.unfeature,
                            .featured.featured-replies.unfeature {
                                display: inline
                            }

                            #bbpress-forums .buried.featured-replies.bury,
                            .buried.featured-replies.bury {
                                display: none
                            }

                            #bbpress-forums .buried.featured-replies.unbury,
                            .buried.featured-replies.unbury {
                                display: inline
                            }

                            .post-type-reply #the-list tr.featured {
                                background-color: #dfd
                            }

                            .post-type-reply #the-list tr.buried {
                                opacity: .5
                            }

                            .group:after {
                                content: "";
                                display: table;
                                clear: both
                            }

                            .screen-reader,
                            .screen-reader-text {
                                position: absolute!important;
                                clip: rect(1px, 1px, 1px, 1px)
                            }

                            p:empty {
                                display: none
                            }

                            #wpadminbar .ab-label {
                                margin: 0
                            }

                            .hide {
                                display: none!important
                            }

                            .center {
                                text-align: center
                            }

                            .badge {
                                background: rgba(255, 138, 0, .1);
                                -webkit-box-shadow: 0 0 5px 1px rgba(255, 138, 0, .1);
                                box-shadow: 0 0 5px 1px rgba(255, 138, 0, .1);
                                padding: .05rem .3rem;
                                border-radius: 4px
                            }

                            circle-text {
                                display: none;
                                text-transform: uppercase;
                                position: absolute;
                                font-size: .65rem;
                                font-weight: 700;
                                color: #939393;
                                letter-spacing: .1rem;
                                top: 5px;
                                right: 356px;
                                z-index: -2;
                                -webkit-transform: rotate(-136deg);
                                transform: rotate(-136deg)
                            }

                            circle-text:defined {
                                display: block
                            }

                            @media (max-width:1200px) {
                                circle-text:defined {
                                    display: none
                                }
                            }

                            .token.cdata,
                            .token.comment,
                            .token.doctype,
                            .token.prolog {
                                color: #5e7671;
                                font-style: italic
                            }

                            .token.property,
                            .token.punctuation,
                            .token.tag {
                                color: #72e0d1
                            }

                            .token.attr-name {
                                color: #83ba52
                            }

                            .token.boolean,
                            .token.number {
                                color: #fc9463
                            }

                            .token.attr-value,
                            .token.selector {
                                color: #f5d67b
                            }

                            .token.entity,
                            .token.operator,
                            .token.url,
                            .token.variable {
                                color: #aa7ee1
                            }

                            .token.atrule,
                            .token.keyword,
                            .token.string {
                                color: #83ba52
                            }

                            .token.important,
                            .token.regex {
                                color: #e90
                            }

                            .language-css,
                            .language-javascript,
                            .language-scss {
                                color: #f5d67b
                            }

                            .button,
                            .comment-reply-link,
                            .commentPreviewButton,
                            input.submit {
                                background-image: -webkit-gradient(linear, right bottom, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to top left, #ff8a00, #da1b60);
                                color: #fff!important;
                                display: inline-block;
                                font-family: inherit;
                                font-weight: 700;
                                border: 0;
                                border-radius: 2rem;
                                white-space: nowrap;
                                padding: 1rem 1.5rem;
                                line-height: 1.4;
                                position: relative;
                                text-align: center;
                                -webkit-transition: 70ms;
                                transition: 70ms;
                                position: relative
                            }

                            .active.commentPreviewButton,
                            .button.active,
                            .button:not(.disabled):focus,
                            .button:not(.disabled):hover,
                            .comment-reply-link.active,
                            .comment-reply-link:not(.disabled):focus,
                            .comment-reply-link:not(.disabled):hover,
                            .commentPreviewButton:not(.disabled):focus,
                            .commentPreviewButton:not(.disabled):hover,
                            input.submit.active,
                            input.submit:not(.disabled):focus,
                            input.submit:not(.disabled):hover {
                                -webkit-transform: translateY(1px);
                                transform: translateY(1px);
                                text-decoration: none
                            }

                            .button:not(.disabled):active,
                            .comment-reply-link:not(.disabled):active,
                            .commentPreviewButton:not(.disabled):active,
                            input.submit:not(.disabled):active {
                                -webkit-transform: translateY(2px);
                                transform: translateY(2px)
                            }

                            .button-small {
                                padding: .4rem 1.5rem
                            }

                            .button-full-width {
                                display: block;
                                width: 100%;
                                text-align: center;
                                margin: 0 0 .5rem 0
                            }

                            .show-all-comments-button {
                                display: block;
                                width: 80vw;
                                margin: 5rem auto
                            }

                            .button-outline,
                            .commentPreviewButton {
                                background: 0 0;
                                color: #a4a4a4!important;
                                border: 3px solid #312d3c
                            }

                            .button-outline:focus,
                            .button-outline:hover,
                            .commentPreviewButton:focus,
                            .commentPreviewButton:hover {
                                color: #fff;
                                border-color: #fff
                            }

                            .button-solid-dark {
                                background: #201c29
                            }

                            .button-invisible {
                                border: 0;
                                background: 0;
                                padding: 0
                            }

                            .gradient-link-button {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                font-weight: 700
                            }

                            .gradient-link-button:focus,
                            .gradient-link-button:hover {
                                text-decoration: underline;
                                -webkit-text-decoration-color: #7a7a8c;
                                text-decoration-color: #7a7a8c
                            }

                            .preview-buttons {
                                margin-top: 1rem
                            }

                            .commentPreviewButton {
                                color: #fff!important;
                                padding-top: .5rem;
                                padding-bottom: .5rem
                            }

                            .commentPreviewButton.active {
                                border-color: #fff
                            }

                            #writeCommentButton {
                                margin-right: .5rem
                            }

                            input[type=email],
                            input[type=password],
                            input[type=search],
                            input[type=text],
                            input[type=url],
                            textarea {
                                font-family: inherit;
                                outline: 0;
                                border: 0;
                                padding: 5px 1rem;
                                border-radius: 16px
                            }

                            textarea {
                                width: 100%;
                                display: block
                            }

                            .fullwidth {
                                width: 100%;
                                margin-bottom: 10px
                            }

                            .full-width-form input[type=email],
                            .full-width-form input[type=password],
                            .full-width-form input[type=search],
                            .full-width-form input[type=text],
                            .full-width-form input[type=url],
                            .full-width-form label,
                            .full-width-form textarea {
                                display: block;
                                width: 100%
                            }

                            .wp-polls-ul {
                                list-style: none;
                                margin: 0 0 1rem 0
                            }

                            .wp-polls-ul input[type=radio] {
                                position: relative;
                                top: -3px;
                                margin-right: 5px
                            }

                            .pollbar {
                                height: 10px;
                                background: #ff8a00
                            }

                            .custom-select {
                                display: block;
                                font-size: 16px;
                                font-family: sans-serif;
                                font-weight: 700;
                                color: #fff;
                                line-height: 1.3;
                                padding: .6em 1.4em .5em .8em;
                                width: 100%;
                                max-width: 100%;
                                margin: 0;
                                border: 0;
                                -moz-appearance: none;
                                -webkit-appearance: none;
                                appearance: none;
                                background-color: transparent;
                                background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 13 24'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='9.31' y1='12.13' x2='9.91' y2='14.89' gradientTransform='matrix(0, 1, 1, 0, -6.5, 5.5)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23ff8a00'/%3E%3Cstop offset='1' stop-color='%23da1b60'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='-4.24' y1='12.93' x2='-3.47' y2='13.15' xlink:href='%23a'/%3E%3ClinearGradient id='c' x1='12.48' y1='13.07' x2='17.01' y2='13.73' xlink:href='%23a'/%3E%3C/defs%3E%3Ctitle%3EAsset 4%3C/title%3E%3Cpath d='M6.5,7V23' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='url(%23a)'/%3E%3Cpath d='M6.5,1V2' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='url(%23b)'/%3E%3Cpath d='M12,17.5,6.5,23,1,17.5' fill='none' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' stroke='url(%23c)'/%3E%3C/svg%3E");
                                background-repeat: no-repeat, repeat;
                                background-position: right .7em top 50%, 0 0;
                                background-size: .65em auto, 100%
                            }

                            .custom-select::-ms-expand {
                                display: none
                            }

                            .custom-select:focus,
                            .custom-select:hover {
                                border-color: #7a7a8c;
                                -webkit-box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
                                box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
                                box-shadow: 0 0 0 3px -moz-mac-focusring;
                                outline: 0
                            }

                            .custom-select option {
                                font-weight: 400;
                                color: #100e17
                            }

                            #top-of-site-pixel-anchor {
                                position: absolute;
                                width: 1px;
                                height: 1px;
                                top: 500px;
                                left: 0
                            }

                            @media (max-width:800px) {
                                #top-of-site-pixel-anchor {
                                    top: 46px
                                }
                            }

                            .footer-colophon,
                            .footer-jobs,
                            .footer-newsletter-inside,
                            .guide-wrap,
                            .header-breadcrumbs-inside,
                            .header-guides-inside,
                            .page-header,
                            .related-ads-comments {
                                max-width: var(--maxWidth);
                                margin: 0 auto
                            }

                            .all-site-wrap {
                                position: relative
                            }

                            .page-wrap {
                                padding: 2rem
                            }

                            @media (max-width:800px) {
                                .page-wrap {
                                    padding: 1rem
                                }
                            }

                            .page-wrap-max-width {
                                max-width: var(--maxWidth);
                                margin: 0 auto
                            }

                            .pagination {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                margin: 0 0 120px 0
                            }

                            .pagination a {
                                width: 200px;
                                text-align: center;
                                display: inline-block;
                                padding: 0 1rem;
                                margin: 0 .5rem
                            }

                            .articles-and-rail {
                                display: grid;
                                grid-template-columns: 300px minmax(0, 1fr);
                                grid-gap: 5.33rem
                            }

                            @media (max-width:1200px) {
                                .articles-and-rail {
                                    grid-gap: 4rem
                                }
                            }

                            @media (max-width:800px) {
                                .articles-and-rail {
                                    display: block
                                }
                            }

                            .util-grid-3 {
                                display: grid;
                                grid-template-columns: 1fr 1fr 1fr;
                                grid-gap: 1rem
                            }

                            @media (max-width:800px) {
                                .util-grid-3 {
                                    display: block
                                }
                                .util-grid-3>* {
                                    margin-bottom: 1rem
                                }
                            }

                            .ais-hits--item,
                            .module {
                                clear: both;
                                margin: 0 0 1rem 0;
                                position: relative
                            }

                            aside .ais-hits--item,
                            aside .module {
                                font-size: .66rem
                            }

                            .ais-hits--item>:last-child,
                            .ais-hits--item>:last-child>:last-child,
                            .module>:last-child,
                            .module>:last-child>:last-child {
                                margin-bottom: 0
                            }

                            .ais-hits--item .attachment-post-thumbnail,
                            .module .attachment-post-thumbnail {
                                width: 100%;
                                display: block
                            }

                            .ais-hits--item .module-content,
                            .module .module-content {
                                padding: 2rem;
                                font-size: .9rem
                            }

                            .ais-hits--item .module-content .byline,
                            .module .module-content .byline {
                                clear: both;
                                text-transform: uppercase;
                                background: rgba(0, 0, 0, .05);
                                font-size: .7rem;
                                color: #999;
                                letter-spacing: 1px;
                                margin: 1rem -2rem 1rem -2rem;
                                display: block;
                                padding: .5rem 2rem
                            }

                            .ais-hits--item .module-content .byline a,
                            .module .module-content .byline a {
                                font-weight: 700;
                                white-space: nowrap
                            }

                             :root {
                                --nav-height: 130px
                            }

                             :root body.header-not-at-top {
                                --nav-height: 60px
                            }

                            @media (max-width:1250px) {
                                 :root {
                                    --nav-height: 100px
                                }
                            }

                            @media (max-width:950px) {
                                 :root {
                                    --nav-height: 60px
                                }
                                 :root body.header-not-at-top {
                                    --nav-height: 60px
                                }
                            }

                            .site-header {
                                background: url(../images/background_topo.png) center top no-repeat;
                                box-shadow: none;
                                height: 90px;
                                position: relative;
                                z-index: 1000;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-animation: none;
                                animation: none
                            }

                            .site-header .logo {
                                -webkit-transition: 0s;
                                transition: 0s;
                                -webkit-box-flex: 0;
                                -ms-flex: 0;
                                flex: 0;
                                position: relative;
                                -ms-flex-item-align: stretch;
                                align-self: stretch;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                            }

                            @media (max-width: 949px) {
                                .logo img {
                                    width: 60% !important;
                                    margin-top: -5px !important;
                                    margin-left: 0px !important;
                                    ;
                                }
                            }

                            @media (max-width: 1200px) and (min-width: 950px) {
                                .logo img {
                                    width: 70%;
                                    margin-top: -20px;
                                    margin-left: -30px;
                                }
                            }

                            @media (min-width: 1201px) and (max-width: 1290px) {
                                .logo img {
                                    width: 90%;
                                    margin-top: 10px;
                                    margin-left: -30px;
                                }
                            }

                            @media (min-width: 1290px) {
                                .logo img {
                                    width: 90%;
                                    margin-top: 10px;
                                    margin-left: -20px;
                                }
                            }

                            .site-header .logo>a {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                            }

                            body.home .site-header .logo>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            .site-header .icon-logo-star {
                                width: 34px;
                                height: 38px;
                                margin: 0 .5rem 0 0;
                                fill: #ff8a00;
                                -webkit-transition: 1.4s ease-out;
                                transition: 1.4s ease-out;
                                -webkit-transform: rotate(720deg);
                                transform: rotate(720deg)
                            }

                            .site-header .icon-logo-text {
                                fill: #fff;
                                height: 25px;
                                width: 199px
                            }

                            .site-header .header-middle-area {
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1
                            }

                            .site-header .main-nav .mobile-nav-button,
                            .site-header .main-nav .mobile-other-nav,
                            .site-header .main-nav .mobile-social {
                                display: none
                            }

                            .site-header .main-nav hr {
                                display: none
                            }

                            .site-header .main-nav .main-sections {
                                display: -webkit-box;
                                display: -ms-flexbox;
                            }

                            .site-header .main-nav .main-sections>li {
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                            }

                            .site-header .main-nav .main-sections>li>a {
                                color: #000;
                                height: var(--nav-height);
                                position: relative;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                text-align: center;
                                -webkit-transition: .1s;
                                transition: .1s
                            }

                            .site-header .main-nav .main-sections>li>a:focus,
                            .site-header .main-nav .main-sections>li>a:hover {
                                -webkit-text-fill-color: #89C742;
                                font-weight: 600;
                            }

                            .site-header .main-nav .main-sections>li>a>svg {
                                -webkit-transition: .2s;
                                transition: .2s;
                                pointer-events: none;
                                width: 40px;
                                height: 40px;
                                display: block;
                                margin: 0 auto .5rem;
                                fill: none;
                                stroke-width: 2;
                                stroke: #c2c2c2
                            }

                            .site-header .main-nav .main-sections>li:first-child a {}

                            .site-header .main-nav:focus>ul>li:nth-child(1) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(1) svg {
                                stroke: #ff8a00
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(2) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(2) svg {
                                stroke: #da1b60
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(3) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(3) svg {
                                stroke: #f44336
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(4) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(4) svg {
                                stroke: #9c27b0
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(5) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(5) svg {
                                stroke: #03a9f4
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(6) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(6) svg {
                                stroke: #4caf50
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(7) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(7) svg {
                                stroke: #8bc34a
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(8) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(8) svg {
                                stroke: #ffeb3b
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(9) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(9) svg {
                                stroke: #607d8b
                            }

                            .site-header .main-nav:focus>ul>li:nth-child(10) svg,
                            .site-header .main-nav:hover>ul>li:nth-child(10) svg {
                                stroke: #ff8a00
                            }

                            body.page-template-new-archive-php .site-header .main-nav>ul>li.articles>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-new-archive-php .site-header .main-nav>ul>li.articles svg {
                                stroke: #ff8a00;
                                fill: rgba(255, 138, 0, .2)
                            }

                            body.page-template-video-archive-php .site-header .main-nav>ul>li.videos>a::before,
                            body.page-template-video-single-php .site-header .main-nav>ul>li.videos>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-video-archive-php .site-header .main-nav>ul>li.videos svg,
                            body.page-template-video-single-php .site-header .main-nav>ul>li.videos svg {
                                stroke: #da1b60;
                                fill: rgba(218, 27, 96, .2)
                            }

                            body.page-template-page-almanac-group-php .site-header .main-nav>ul>li.almanac>a::before,
                            body.page-template-page-almanac-single-php .site-header .main-nav>ul>li.almanac>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-page-almanac-group-php .site-header .main-nav>ul>li.almanac svg,
                            body.page-template-page-almanac-single-php .site-header .main-nav>ul>li.almanac svg {
                                stroke: #f44336;
                                fill: rgba(244, 67, 54, .2)
                            }

                            body.page-template-page-snippet-cat-php .site-header .main-nav>ul>li.snippets>a::before,
                            body.page-template-page-snippet-php .site-header .main-nav>ul>li.snippets>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-page-snippet-cat-php .site-header .main-nav>ul>li.snippets svg,
                            body.page-template-page-snippet-php .site-header .main-nav>ul>li.snippets svg {
                                stroke: #9c27b0;
                                fill: rgba(156, 39, 176, .2)
                            }

                            body.page-template-page-newsletters .site-header .main-nav>ul>li.newsletter>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-page-newsletters .site-header .main-nav>ul>li.newsletter svg {
                                stroke: #03a9f4;
                                fill: rgba(3, 169, 244, .2)
                            }

                            body.page-template-jobs .site-header .main-nav>ul>li.jobs>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.page-template-jobs .site-header .main-nav>ul>li.jobs svg {
                                stroke: #4caf50;
                                fill: rgba(76, 175, 80, .2)
                            }

                            body.post-type-archive-guides .site-header .main-nav>ul>li.guides>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            body.post-type-archive-guides .site-header .main-nav>ul>li.guides svg {
                                stroke: #8bc34a;
                                fill: rgba(139, 195, 74, .2)
                            }

                            body.page-template-page-newsletters .site-header .main-nav>ul>li.newsletter>a::before {
                                background-image: -webkit-gradient(linear, right top, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to left, #ff8a00, #da1b60);
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 5px
                            }

                            .site-header .mobile-actions {
                                display: none;
                                margin-left: auto;
                                background: #100e17;
                                height: var(--nav-height);
                                border-left: 1px solid #201c29;
                                border-bottom: 1px solid #201c29;
                                border-top-left-radius: 30px;
                                border-bottom-left-radius: 30px
                            }

                            .site-header .mobile-actions.nav-is-open .mobile-nav-button {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60)
                            }

                            .site-header .mobile-actions.nav-is-open .icon-close {
                                display: block
                            }

                            .site-header .mobile-actions.nav-is-open .icon-burger {
                                display: none
                            }

                            .site-header .mobile-actions>button {
                                padding: 13px 22px;
                                outline: 0;
                                height: var(--nav-height)
                            }

                            .site-header .mobile-actions>button svg {
                                display: block
                            }

                            .site-header .mobile-actions .icon-burger {
                                fill: #fff;
                                width: 26px;
                                height: 26px
                            }

                            .site-header .mobile-actions .icon-search {
                                width: 26px;
                                height: 26px
                            }

                            .site-header .mobile-actions .icon-close {
                                display: none;
                                width: 26px;
                                height: 26px;
                                fill: #fff
                            }

                            .site-header .mobile-actions .mobile-nav-button {
                                background: 0 0;
                                border: 0;
                                border-left: 1px solid #201c29
                            }

                            .site-header .mobile-actions .search-opener {
                                border: 0;
                                background: 0 0;
                                padding-left: 26px
                            }

                            .site-header .mobile-actions .search-opener .icon-search {
                                top: auto
                            }

                            body.header-not-at-top {
                                padding-top: 130px
                            }

                            body.header-not-at-top .site-header {
                                position: fixed;
                                top: 0;
                                left: 0;
                                width: 100%;
                                -webkit-box-shadow: 0 4px 3px rgba(0, 0, 0, 0.12);
                                ;
                                box-shadow: 0 4px 3px rgba(0, 0, 0, 0.12);
                                ;
                                -webkit-transform: translateY(-100px);
                                transform: translateY(-100px);
                                -webkit-animation: move-down .2s forwards;
                                animation: move-down .2s forwards
                            }

                            @-webkit-keyframes move-down {
                                100% {
                                    -webkit-transform: translateY(0);
                                    transform: translateY(0)
                                }
                            }

                            @keyframes move-down {
                                100% {
                                    -webkit-transform: translateY(0);
                                    transform: translateY(0)
                                }
                            }

                            body.header-not-at-top .site-header .logo {
                                margin-top: 0px;
                            }

                            body.header-not-at-top .site-header .logo .icon-logo-star {
                                -webkit-transition: 0s;
                                transition: 0s;
                                -webkit-transform: rotate(0);
                                transform: rotate(0)
                            }

                            body.header-not-at-top .site-header .logo>a::before {
                                -webkit-transform: translateY(-10px);
                                transform: translateY(-10px)
                            }

                            body.header-not-at-top .site-header .main-sections svg {
                                display: none
                            }

                            body.header-not-at-top .site-header .main-sections>li>a svg {
                                display: none
                            }

                            body.header-not-at-top .site-header .search-form {
                                padding: 1px
                            }

                            body.header-not-at-top .site-header .search-form input[type=search] {
                                padding: .35rem 1rem;
                                font-size: .8rem
                            }

                            body.header-not-at-top .site-header .search-form .icon-search {
                                width: 24px;
                                height: 24px;
                                padding: 3px
                            }

                            body.admin-bar.header-not-at-top .site-header {
                                top: 32px
                            }

                            @media (max-width:1250px) {
                                .site-header .icon-logo-star {
                                    width: 20px;
                                    height: 22px
                                }
                                .site-header .icon-logo-text {
                                    height: 15px;
                                    width: 116px
                                }
                                .site-header .mobile-actions {
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex
                                }
                                .site-header .mobile-actions .icon-search {
                                    -webkit-transform: none;
                                    transform: none;
                                    position: relative
                                }
                                .site-header .mobile-nav-button {
                                    display: none
                                }
                                .site-header .main-nav .main-sections li.guides a {
                                    border-right: 0
                                }
                                .site-header .main-nav .main-sections>li>a>svg {
                                    width: 30px;
                                    height: 30px
                                }
                                .site-header .search {
                                    opacity: 0;
                                    visibility: hidden;
                                    position: fixed;
                                    -webkit-transform: translateX(100px);
                                    transform: translateX(100px);
                                    -webkit-transition: .1s;
                                    transition: .1s;
                                    left: 0;
                                    top: var(--nav-height);
                                    background: #000;
                                    width: 100%;
                                    padding: 1rem!important
                                }
                                body.admin-bar .site-header .search {
                                    top: calc(var(--nav-height) + 32px)
                                }
                                body.admin-bar.header-not-at-top .site-header .search {
                                    top: calc(var(--nav-height));
                                    margin-left: 0
                                }
                                .site-header .search.open {
                                    opacity: 1;
                                    visibility: visible;
                                    -webkit-transform: translateX(0);
                                    transform: translateX(0);
                                    z-index: 2
                                }
                                body.header-not-at-top .site-header .logo {
                                    -webkit-transform: scale(1);
                                    transform: scale(1)
                                }
                                body.header-not-at-top .site-header .mobile-actions>button {
                                    padding-top: 11px
                                }
                                body.header-not-at-top .site-header .mobile-actions .icon-search {
                                    width: 18px;
                                    height: 18px
                                }
                            }

                            @media (max-width:950px) {
                                .site-header {
                                    position: fixed;
                                    top: 0;
                                    left: 0;
                                    width: 100%;
                                    padding-right: 0
                                }
                                .site-header .logo {
                                    -webkit-transform: scale(1)!important;
                                    transform: scale(1)!important;
                                    padding: 0 1rem;
                                    margin-top: 0px;
                                }
                                .site-header .main-nav {
                                    scrollbar-color: #312d3c;
                                    scrollbar-width: 8px;
                                    overflow: auto;
                                    opacity: 0;
                                    visibility: hidden;
                                    -webkit-transition: .2s;
                                    transition: .2s;
                                    position: absolute;
                                    top: var(--nav-height);
                                    left: 0;
                                    background: #100e17;
                                    z-index: 1;
                                    display: grid;
                                    grid-template-rows: auto 15px 1fr 75px;
                                    width: 100%;
                                    height: calc(100vh - var(--nav-height))
                                }
                                .site-header .main-nav::-webkit-scrollbar {
                                    width: 8px;
                                    height: 8px
                                }
                                .site-header .main-nav::-webkit-scrollbar-thumb {
                                    background: #312d3c;
                                    border-radius: 8px;
                                    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                                }
                                .site-header .main-nav::-webkit-scrollbar-track {
                                    background: linear-gradient(to right, #201c29, #201c29 1px, transparent 1px, transparent)
                                }
                                body.admin-bar .site-header .main-nav {
                                    height: calc(100vh - var(--nav-height) - 46px)
                                }
                                .site-header .main-nav hr {
                                    display: block
                                }
                                .site-header .main-nav>* {
                                    -webkit-transition: .2s;
                                    transition: .2s;
                                    -webkit-transform: translateY(10px);
                                    transform: translateY(10px)
                                }
                                .site-header .main-nav.open {
                                    opacity: 1;
                                    visibility: visible
                                }
                                .site-header .main-nav.open>* {
                                    -webkit-transform: translateY(0);
                                    transform: translateY(0)
                                }
                                .site-header .main-nav.open>:nth-child(1) {
                                    -webkit-transition-delay: 50ms;
                                    transition-delay: 50ms
                                }
                                .site-header .main-nav.open>:nth-child(2) {
                                    -webkit-transition-delay: .1s;
                                    transition-delay: .1s
                                }
                                .site-header .main-nav.open>:nth-child(3) {
                                    -webkit-transition-delay: .15s;
                                    transition-delay: .15s
                                }
                                .site-header .main-nav.open>:nth-child(4) {
                                    -webkit-transition-delay: .2s;
                                    transition-delay: .2s
                                }
                                .site-header .main-nav .mobile-other-nav,
                                .site-header .main-nav .mobile-social {
                                    display: block
                                }
                                .site-header .main-nav .main-sections {
                                    -ms-flex-wrap: wrap;
                                    flex-wrap: wrap;
                                    padding: 1rem 0
                                }
                                .site-header .main-nav .main-sections>li {
                                    height: auto;
                                    -webkit-box-flex: 0;
                                    -ms-flex: 0 0 33.33%;
                                    flex: 0 0 33.33%
                                }
                                .site-header .main-nav .main-sections>li>a {
                                    height: auto;
                                    width: 100%;
                                    border: 0;
                                    padding: 1rem!important
                                }
                                .site-header .main-nav .main-sections>li>a::before {
                                    display: none
                                }
                                .site-header .main-nav .main-sections>li>a>svg {
                                    display: block!important;
                                    width: 42px;
                                    height: 42px
                                }
                                .site-header .main-nav .main-sections>li.newsletter {
                                    display: none
                                }
                                .site-header .main-nav .mobile-other-nav {
                                    display: grid;
                                    grid-template-columns: 1fr 1fr;
                                    align-self: self-start;
                                    padding: 1rem
                                }
                                .site-header .main-nav .mobile-other-nav>a {
                                    display: block;
                                    text-align: center;
                                    padding: .5rem;
                                    color: #c2c2c2
                                }
                                .site-header .main-nav .mobile-social {
                                    display: grid;
                                    grid-template-columns: repeat(5, 1fr);
                                    border-top: 1px solid #201c29
                                }
                                .site-header .main-nav .mobile-social>a {
                                    display: grid;
                                    place-items: center center;
                                    border-left: 1px solid #201c29;
                                    height: 100%
                                }
                                .site-header .main-nav .mobile-social>a>svg {
                                    width: 20px;
                                    height: 20px;
                                    fill: url(#orange-to-pink)
                                }
                                .site-header .mobile-nav-button {
                                    display: block
                                }
                                body.admin-bar .site-header {
                                    top: 46px
                                }
                                body {
                                    padding-top: var(--nav-height)
                                }
                                body.header-not-at-top .site-header {
                                    -webkit-animation: none;
                                    animation: none;
                                    -webkit-transform: none;
                                    transform: none
                                }
                                body.header-not-at-top .site-header .mobile-actions>button {
                                    padding-top: 13px
                                }
                                body.header-not-at-top .site-header .mobile-actions .icon-search {
                                    width: 26px!important;
                                    height: 26px!important
                                }
                                body.admin-bar.header-not-at-top .site-header {
                                    top: 0
                                }
                            }

                            .page-header-top-nav .search,
                            .site-header .search {
                                padding: 0 40px;
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1
                            }

                            .page-header-top-nav .search-form,
                            .site-header .search-form {
                                background: #fff;
                                padding: 2px;
                                border-radius: 28px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex
                            }

                            .page-header-top-nav .search-form input[type=search],
                            .site-header .search-form input[type=search] {
                                background: #201c29;
                                border: 0;
                                min-width: 0;
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1;
                                color: #fff;
                                padding: .75rem 2.5rem .75rem 1.5rem;
                                border-radius: 27px
                            }

                            .page-header-top-nav .search-form:focus-within,
                            .site-header .search-form:focus-within {
                                background-image: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to right, #ff8a00, #da1b60)
                            }

                            .page-header-top-nav .icon-search,
                            .site-header .icon-search {
                                position: absolute;
                                top: 50%;
                                -webkit-transform: translate(-40px, -50%);
                                transform: translate(-40px, -50%);
                                fill: url(#orange-to-pink)
                            }

                            .site-header .search {
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 400px;
                                flex: 0 0 400px
                            }

                            .sidebar .csw-widget {
                                margin: 0 0 2rem 0
                            }

                            .sidebar .csw-widget #searchform,
                            .sidebar .csw-widget .jetpack-search-filters-widget__sub-heading {
                                display: none
                            }

                            .sidebar .csw-widget .jetpack-search-sort-wrapper {
                                margin: 0 0 1rem 0
                            }

                            .footer-jobs-header {
                                margin-right: 3rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column
                            }

                            .footer-jobs-header p {
                                color: #7a7a8c;
                                font-size: 16px;
                                margin-bottom: 1rem;
                                margin-top: .5rem
                            }

                            .footer-jobs-header .button:first-of-type,
                            .footer-jobs-header .commentPreviewButton:first-of-type {
                                margin-top: auto
                            }

                            .footer-jobs-wrapper {
                                background: #100e17;
                                padding: 2rem
                            }

                            @media (max-width:800px) {
                                .footer-jobs-wrapper {
                                    padding: 1rem
                                }
                            }

                            .footer-jobs {
                                padding: 2rem 0 1rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex
                            }

                            .footer-jobs .job-list>li>a {
                                display: block;
                                height: 100%;
                                width: 100%;
                                font-size: 16px;
                                background: #201c29;
                                color: #a1a1af;
                                -webkit-box-shadow: 0 0 2rem #000;
                                box-shadow: 0 0 2rem #000;
                                padding: 1.5rem;
                                border-radius: 8px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-transition: .2s;
                                transition: .2s
                            }

                            .footer-jobs .job-list>li>a strong {
                                color: #fff
                            }

                            .footer-jobs .job-list>li>a .icon-pin {
                                width: 18px;
                                height: 18px;
                                fill: #fff
                            }

                            .footer-jobs .job-list>li>a .job-info {
                                margin-bottom: 1rem
                            }

                            .footer-jobs .job-list>li>a address {
                                margin-top: auto
                            }

                            .footer-jobs .job-list>li>a:focus,
                            .footer-jobs .job-list>li>a:hover {
                                -webkit-transform: translateY(-5px);
                                transform: translateY(-5px);
                                background: #201c29;
                                color: #fff;
                                -webkit-text-fill-color: #fff
                            }

                            .footer-jobs .job-list>li>a:focus .icon-pin,
                            .footer-jobs .job-list>li>a:hover .icon-pin {
                                fill: url(#orange-to-pink)
                            }

                            @media (min-width:1200px) {
                                .footer-jobs .job-list {
                                    -webkit-box-flex: 1;
                                    -ms-flex: 1;
                                    flex: 1;
                                    display: grid;
                                    grid-gap: 1rem;
                                    grid-template-columns: repeat(3, 1fr)
                                }
                                .footer-jobs .job-list .mini-card {
                                    -webkit-box-shadow: 0 0 2rem #000;
                                    box-shadow: 0 0 2rem #000
                                }
                            }

                            @media (max-width:1200px) {
                                .footer-jobs {
                                    scrollbar-color: linear-gradient(to right, #da1b60, #ff8a00);
                                    scrollbar-width: 15px;
                                    width: 100%;
                                    overflow-x: auto;
                                    -webkit-overflow-scrolling: touch;
                                    -ms-scroll-snap-points-x: repeat(200px);
                                    scroll-snap-points-x: repeat(200px);
                                    -ms-scroll-snap-type: mandatory;
                                    scroll-snap-type: mandatory
                                }
                                .footer-jobs::-webkit-scrollbar {
                                    width: 15px;
                                    height: 15px
                                }
                                .footer-jobs::-webkit-scrollbar-thumb {
                                    background: -webkit-gradient(linear, left top, right top, from(#da1b60), to(#ff8a00));
                                    background: linear-gradient(to right, #da1b60, #ff8a00);
                                    border-radius: 15px;
                                    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                                }
                                .footer-jobs::-webkit-scrollbar-track {
                                    background: linear-gradient(to right, #201c29, #201c29 1px, #17141d 1px, #17141d)
                                }
                                .footer-jobs .footer-jobs-header {
                                    margin-right: 4rem
                                }
                                .footer-jobs .job-list {
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex
                                }
                                .footer-jobs .job-list>li>a {
                                    scroll-snap-align: start;
                                    width: 200px
                                }
                                .footer-jobs .job-list>li>a:not(.first-child) {
                                    margin-left: -20px
                                }
                                .footer-jobs .job-list>li {
                                    -webkit-transition: .2s;
                                    transition: .2s
                                }
                                .footer-jobs .job-list>li:hover {
                                    -webkit-transform: translateY(-5px);
                                    transform: translateY(-5px)
                                }
                                .footer-jobs .job-list>li:hover~li {
                                    -webkit-transform: translateX(20px);
                                    transform: translateX(20px)
                                }
                            }

                            .footer-newsletter {
                                background: #100e17;
                                text-align: center
                            }

                            .footer-newsletter p {
                                color: #b1b1b1;
                                margin: 0 auto 1rem
                            }

                            .footer-newsletter-inside {
                                padding: 2rem 2rem 8rem 2rem
                            }

                            @media (max-width:800px) {
                                .footer-newsletter-inside {
                                    padding-left: 1rem;
                                    padding-right: 1rem
                                }
                            }

                            #footer-form-wrap {
                                position: relative;
                                display: inline-block;
                                height: 70px;
                                width: calc(100% - 400px);
                                max-width: 750px;
                                min-width: 350px
                            }

                            @media (max-width:1040px) {
                                #footer-form-wrap {
                                    width: calc(100% - 30px);
                                    min-width: 0
                                }
                            }

                            body.page-template-page-newsletters-php #footer-form-wrap {
                                width: 100%
                            }

                            #footer-form-wrap h2,
                            #footer-form-wrap p {
                                color: #fff;
                                text-align: center
                            }

                            #footer-form-wrap .bounce {
                                display: inline-block;
                                width: 100%
                            }

                            #footer-form-wrap .subwrap {
                                display: inline-block;
                                height: 70px;
                                width: 100%;
                                position: relative;
                                -webkit-transition: 1s ease-in-out;
                                transition: 1s ease-in-out;
                                margin-left: -10px
                            }

                            #footer-form-wrap .subwrap * {
                                -webkit-box-sizing: border-box;
                                box-sizing: border-box
                            }

                            #footer-form-wrap .subwrap .inner-sub {
                                display: inherit;
                                width: inherit
                            }

                            #footer-form-wrap .dive {
                                pointer-events: none;
                                -webkit-animation: sail 3s ease-in-out 1 forwards;
                                animation: sail 3s ease-in-out 1 forwards;
                                -webkit-animation-delay: 1.75s;
                                animation-delay: 1.75s;
                                margin-left: -50%
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap .dive {
                                    -webkit-animation: sail 2s ease-in-out 1 forwards;
                                    animation: sail 2s ease-in-out 1 forwards;
                                    -webkit-animation-delay: 1.75s;
                                    animation-delay: 1.75s
                                }
                            }

                            @-webkit-keyframes sail {
                                0% {
                                    -webkit-transform: translateX(0);
                                    transform: translateX(0)
                                }
                                50% {
                                    -webkit-transform: translateX(125vw);
                                    transform: translateX(125vw)
                                }
                                100% {
                                    -webkit-transform: translateX(125vw);
                                    transform: translateX(125vw)
                                }
                            }

                            @keyframes sail {
                                0% {
                                    -webkit-transform: translateX(0);
                                    transform: translateX(0)
                                }
                                50% {
                                    -webkit-transform: translateX(125vw);
                                    transform: translateX(125vw)
                                }
                                100% {
                                    -webkit-transform: translateX(125vw);
                                    transform: translateX(125vw)
                                }
                            }

                            #footer-form-wrap .dive .inner-sub {
                                -webkit-animation: bounce .5s ease-in-out infinite alternate;
                                animation: bounce .5s ease-in-out infinite alternate;
                                -webkit-animation-delay: 1.5s;
                                animation-delay: 1.5s;
                                -webkit-transform-origin: 100% 50%;
                                transform-origin: 100% 50%
                            }

                            @-webkit-keyframes bounce {
                                from {
                                    -webkit-transform: translateY(-5px) rotate(1.5deg);
                                    transform: translateY(-5px) rotate(1.5deg)
                                }
                                to {
                                    -webkit-transform: translateY(5px) rotate(-1.5deg);
                                    transform: translateY(5px) rotate(-1.5deg)
                                }
                            }

                            @keyframes bounce {
                                from {
                                    -webkit-transform: translateY(-5px) rotate(1.5deg);
                                    transform: translateY(-5px) rotate(1.5deg)
                                }
                                to {
                                    -webkit-transform: translateY(5px) rotate(-1.5deg);
                                    transform: translateY(5px) rotate(-1.5deg)
                                }
                            }

                            #footer-form-wrap .dive .btnwrap {
                                z-index: -1
                            }

                            #footer-form-wrap .dive .btnwrap b span {
                                opacity: 0
                            }

                            #footer-form-wrap .dive .btnwrap b:after {
                                -webkit-transform: scaleY(1);
                                transform: scaleY(1)
                            }

                            #footer-form-wrap .dive .bounce {
                                -webkit-animation: bounce .5s ease-in-out infinite alternate;
                                animation: bounce .5s ease-in-out infinite alternate;
                                -webkit-transform-origin: 75% 50%;
                                transform-origin: 75% 50%
                            }

                            @keyframes bounce {
                                from {
                                    -webkit-transform: translateY(-5px) rotate(1.5deg);
                                    transform: translateY(-5px) rotate(1.5deg)
                                }
                                to {
                                    -webkit-transform: translateY(5px) rotate(-1.5deg);
                                    transform: translateY(5px) rotate(-1.5deg)
                                }
                            }

                            #footer-form-wrap .dive .submarine {
                                width: 175px;
                                -webkit-box-shadow: inset 0 -1px 0 0 #da1b60;
                                box-shadow: inset 0 -1px 0 0 #da1b60
                            }

                            #footer-form-wrap .dive .submarine .fin {
                                -webkit-transform: rotate(25deg) scaleX(1);
                                transform: rotate(25deg) scaleX(1);
                                -webkit-transition-delay: .75s;
                                transition-delay: .75s
                            }

                            #footer-form-wrap .dive .submarine .fin.lower {
                                -webkit-transform: rotate(-25deg) scaleX(1);
                                transform: rotate(-25deg) scaleX(1);
                                -webkit-transition-delay: .85s;
                                transition-delay: .85s
                            }

                            #footer-form-wrap .dive .submarine .prop {
                                width: 15px
                            }

                            #footer-form-wrap .dive .submarine .prop:after,
                            #footer-form-wrap .dive .submarine .prop:before {
                                -webkit-transform: scaleY(1);
                                transform: scaleY(1);
                                -webkit-transition-delay: .4s;
                                transition-delay: .4s
                            }

                            #footer-form-wrap .dive .submarine .periscope {
                                -webkit-transition-delay: .6s;
                                transition-delay: .6s;
                                -webkit-transform-style: preserve-3d;
                                transform-style: preserve-3d;
                                -webkit-transform: scaleY(1) translateZ(10px);
                                transform: scaleY(1) translateZ(10px)
                            }

                            #footer-form-wrap .dive .submarine .periscope:before {
                                -webkit-transition-delay: 1s;
                                transition-delay: 1s;
                                -webkit-transform: scaleY(1);
                                transform: scaleY(1)
                            }

                            #footer-form-wrap .dive .submarine .periscope:after {
                                -webkit-transition-delay: 1.2s;
                                transition-delay: 1.2s;
                                -webkit-transform: scale(1);
                                transform: scale(1)
                            }

                            #footer-form-wrap .dive .submarine .porthole {
                                -webkit-transform-style: preserve-3d;
                                transform-style: preserve-3d;
                                -webkit-transform: scale(1) translateZ(10px);
                                transform: scale(1) translateZ(10px);
                                -webkit-transition-delay: .7s;
                                transition-delay: .7s;
                                z-index: 999
                            }

                            #footer-form-wrap .dive .submarine .porthole:nth-of-type(2) {
                                -webkit-transition-delay: .85s;
                                transition-delay: .85s
                            }

                            #footer-form-wrap .dive .submarine .inner:before {
                                -webkit-transform: translateY(0);
                                transform: translateY(0)
                            }

                            #footer-form-wrap .dive .submarine .inner:after {
                                -webkit-transform: translateY(0);
                                transform: translateY(0)
                            }

                            #footer-form-wrap form {
                                position: relative;
                                height: auto;
                                width: 100%;
                                display: inline-block;
                                z-index: 2;
                                -webkit-transition: 1s ease-in-out;
                                transition: 1s ease-in-out
                            }

                            #footer-form-wrap form .screen-reader {
                                position: absolute!important;
                                clip: rect(1px, 1px, 1px, 1px)
                            }

                            #footer-form-wrap form .submarine {
                                display: inline-block;
                                width: calc(100% - 30px);
                                border-radius: 80px 0 0 80px;
                                background: #fff;
                                height: 70px;
                                -webkit-box-sizing: border-box;
                                box-sizing: border-box;
                                max-height: 70px;
                                float: right;
                                margin-right: 30px;
                                position: relative;
                                -webkit-transition: .5s ease-in-out;
                                transition: .5s ease-in-out;
                                -webkit-transition-delay: .2s;
                                transition-delay: .2s;
                                -webkit-perspective: 10000px;
                                perspective: 10000px;
                                will-change: width;
                                box-sizing: border-box
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap form .submarine {
                                    width: calc(100% - 50px);
                                    margin-right: 40px
                                }
                            }

                            #footer-form-wrap form .submarine .prop {
                                position: absolute;
                                height: 10px;
                                background: #ff8a00;
                                left: -15px;
                                top: calc(50% - 5px);
                                border-radius: 5px 0 0 5px;
                                -webkit-transform-style: preserve-3d;
                                transform-style: preserve-3d;
                                -webkit-transition: .2s ease-in-out;
                                transition: .2s ease-in-out;
                                width: 0;
                                -webkit-animation: spin 1s linear infinite;
                                animation: spin 1s linear infinite
                            }

                            @-webkit-keyframes spin {
                                to {
                                    -webkit-transform: rotateX(360deg);
                                    transform: rotateX(360deg)
                                }
                            }

                            @keyframes spin {
                                to {
                                    -webkit-transform: rotateX(360deg);
                                    transform: rotateX(360deg)
                                }
                            }

                            #footer-form-wrap form .submarine .prop:after,
                            #footer-form-wrap form .submarine .prop:before {
                                content: "";
                                position: absolute;
                                width: 90%;
                                height: 27.5px;
                                background: -webkit-gradient(linear, left top, left bottom, from(#da1b60), to(#ff8a00));
                                background: linear-gradient(to bottom, #da1b60, #ff8a00);
                                background-color: #da1b60;
                                border-radius: 100px 100px 0 100px;
                                top: -25px;
                                right: 0;
                                -webkit-transform-origin: bottom;
                                transform-origin: bottom;
                                -webkit-transform: scaleY(0);
                                transform: scaleY(0);
                                -webkit-transition: .2s ease-in-out;
                                transition: .2s ease-in-out
                            }

                            #footer-form-wrap form .submarine .prop:after {
                                top: auto;
                                bottom: -25px;
                                background: -webkit-gradient(linear, left bottom, left top, from(#da1b60), to(#ff8a00));
                                background: linear-gradient(to top, #da1b60, #ff8a00);
                                background-color: #da1b60;
                                border-radius: 100px 0 100px 100px;
                                -webkit-transform-origin: top;
                                transform-origin: top
                            }

                            #footer-form-wrap form .submarine .periscope {
                                position: absolute;
                                height: 25px;
                                width: 75px;
                                background: #ff8a00;
                                top: -10px;
                                left: calc(50% - 22.5px);
                                border-radius: 50px 50px 0 0;
                                -webkit-transform-origin: bottom;
                                transform-origin: bottom;
                                -webkit-transform: scaleY(0);
                                transform: scaleY(0);
                                -webkit-transition: .2s cubic-bezier(.175, .885, .32, 1.275);
                                transition: .2s cubic-bezier(.175, .885, .32, 1.275)
                            }

                            #footer-form-wrap form .submarine .periscope:before {
                                content: "";
                                position: absolute;
                                width: 20px;
                                height: 50px;
                                border-left: 10px solid #ff8a00;
                                border-top: 10px solid #ff8a00;
                                top: -50px;
                                left: calc(50% - 10px);
                                border-radius: 50px 0 0 0;
                                -webkit-transition: .2s cubic-bezier(.175, .885, .32, 1.275);
                                transition: .2s cubic-bezier(.175, .885, .32, 1.275);
                                -webkit-transform-origin: bottom;
                                transform-origin: bottom;
                                -webkit-transform: scaleY(0);
                                transform: scaleY(0)
                            }

                            #footer-form-wrap form .submarine .periscope:after {
                                content: "";
                                width: 5px;
                                height: 8px;
                                background: linear-gradient(-45deg, #fff, #fff 45%, #c4e4e4 45%);
                                background-color: #c4e4e4;
                                position: absolute;
                                top: -49px;
                                border-radius: 100%;
                                right: 23px;
                                -webkit-transform: scale(0);
                                transform: scale(0);
                                -webkit-transition: .2s cubic-bezier(.175, .885, .32, 1.275);
                                transition: .2s cubic-bezier(.175, .885, .32, 1.275)
                            }

                            #footer-form-wrap form .submarine .fin {
                                position: absolute;
                                width: 40px;
                                height: 15px;
                                left: 10px;
                                top: -2.5px;
                                background: #ff8a00;
                                -webkit-transform-origin: right;
                                transform-origin: right;
                                -webkit-transform: rotate(25deg) scaleX(0);
                                transform: rotate(25deg) scaleX(0);
                                border-radius: 200px 100px 0 50px;
                                -webkit-transition: .3s cubic-bezier(.175, .885, .32, 1.275);
                                transition: .3s cubic-bezier(.175, .885, .32, 1.275);
                                will-change: transform
                            }

                            #footer-form-wrap form .submarine .fin.lower {
                                top: auto;
                                bottom: -2.5px;
                                -webkit-transform: rotate(-25deg) scaleX(0);
                                transform: rotate(-25deg) scaleX(0);
                                border-radius: 50px 0 100px 200px;
                                background: #da1b60
                            }

                            #footer-form-wrap form .submarine .porthole {
                                position: absolute;
                                width: 30px;
                                height: 30px;
                                z-index: 999;
                                background: linear-gradient(-45deg, #fff, #fff 45%, #c4e4e4 45%);
                                -webkit-box-shadow: inset 0 0 0 5px #ff8a00, 0 2.5px 0 0 #da1b60;
                                box-shadow: inset 0 0 0 5px #ff8a00, 0 2.5px 0 0 #da1b60;
                                background-color: #c4e4e4;
                                border-radius: 100%;
                                left: calc(50% - 30px);
                                top: calc(50% - 15px);
                                -webkit-transform: scale(0);
                                transform: scale(0);
                                -webkit-transition: .2s cubic-bezier(.175, .885, .32, 1.275);
                                transition: .2s cubic-bezier(.175, .885, .32, 1.275)
                            }

                            #footer-form-wrap form .submarine .porthole:nth-of-type(2) {
                                left: calc(50% + 25px)
                            }

                            #footer-form-wrap form .submarine .inner {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                border-radius: inherit;
                                overflow: hidden;
                                left: 0;
                                top: 0;
                                pointer-events: none;
                                z-index: 9
                            }

                            #footer-form-wrap form .submarine .inner:before {
                                content: "";
                                position: absolute;
                                width: 100%;
                                height: calc(50% + 5px);
                                top: -2.5px;
                                left: 0;
                                background: -webkit-gradient(linear, left top, left bottom, from(#ff8a00), color-stop(200%, #da1b60));
                                background: linear-gradient(to bottom, #ff8a00, #da1b60 200%);
                                background-color: #da1b60;
                                -webkit-transition: .3s ease-in-out;
                                transition: .3s ease-in-out;
                                -webkit-transform: translateY(-100%);
                                transform: translateY(-100%)
                            }

                            #footer-form-wrap form .submarine .inner:after {
                                content: "";
                                position: absolute;
                                width: 100%;
                                height: calc(50% + 5px);
                                bottom: -2.5px;
                                left: 0;
                                background: -webkit-gradient(linear, left bottom, left top, from(#da1b60), color-stop(200%, #ff8a00));
                                background: linear-gradient(to top, #da1b60, #ff8a00 200%);
                                background-color: #da1b60;
                                -webkit-transition: .3s ease-in-out;
                                transition: .3s ease-in-out;
                                -webkit-transform: translateY(100%);
                                transform: translateY(100%)
                            }

                            #footer-form-wrap form input[type=email] {
                                -webkit-box-sizing: border-box;
                                box-sizing: border-box;
                                height: 70px;
                                max-height: 70px;
                                width: calc(100% - 50px);
                                border-radius: 80px 0 0 80px;
                                box-sizing: border-box;
                                border: none;
                                outline: 0;
                                margin-left: -45px;
                                padding-left: 25px;
                                font-size: 20px;
                                background: 0 0;
                                font-weight: 500;
                                -webkit-transition: .2s ease-in-out;
                                transition: .2s ease-in-out;
                                opacity: 1
                            }

                            #footer-form-wrap form input[type=email]:active,
                            #footer-form-wrap form input[type=email]:focus {
                                background: 0 0
                            }

                            #footer-form-wrap form input[type=email].hide {
                                color: transparent;
                                background: 0 0;
                                opacity: 0
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap form input[type=email] {
                                    width: calc(100% - 30px);
                                    font-size: 14px
                                }
                            }

                            body.page-template-page-newsletters-php #footer-form-wrap form input[type=email] {
                                margin-left: 0
                            }

                            #footer-form-wrap form .btnwrap {
                                display: inline-block;
                                width: auto;
                                height: 70px;
                                position: absolute;
                                right: 0;
                                top: 0;
                                padding: 0 20px
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap form .btnwrap {
                                    padding: 0 10px
                                }
                            }

                            #footer-form-wrap form .btnwrap b {
                                position: absolute;
                                display: inline-block;
                                color: #fff;
                                width: 100%;
                                height: 70px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                z-index: 2;
                                font-size: 20px;
                                pointer-events: none;
                                top: 0
                            }

                            #footer-form-wrap form .btnwrap b span {
                                display: inline-block;
                                -webkit-transition: .2s ease-in-out;
                                transition: .2s ease-in-out
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap form .btnwrap b {
                                    font-size: 16px
                                }
                            }

                            #footer-form-wrap form .btnwrap b:before {
                                content: "";
                                position: absolute;
                                width: 100%;
                                height: 70px;
                                background: linear-gradient(-45deg, #ff8a00, #da1b60);
                                background-color: #da1b60;
                                z-index: -1;
                                right: 0;
                                top: 0;
                                border-radius: 0 80px 80px 0
                            }

                            @media (max-width:1200px) {
                                #footer-form-wrap form .btnwrap b:before {
                                    height: 71px
                                }
                            }

                            @media (max-width:768px) {
                                #footer-form-wrap form .btnwrap b:before {
                                    width: 100%;
                                    right: 0
                                }
                            }

                            #footer-form-wrap form .btnwrap b:after {
                                content: "";
                                position: absolute;
                                width: 40px;
                                height: 100%;
                                z-index: 999;
                                right: -5px;
                                top: 0;
                                border-radius: 0 80px 80px 0;
                                -webkit-box-shadow: -10px 0 0 #ccc;
                                box-shadow: -10px 0 0 #ccc;
                                -webkit-transform: scaleY(0);
                                transform: scaleY(0);
                                background: linear-gradient(45deg, #fff, #fff 45%, #c4e4e4 45%);
                                background-color: #c4e4e4;
                                -webkit-box-shadow: inset 5px 0 0 #da1b60;
                                box-shadow: inset 5px 0 0 #da1b60;
                                border-left: 5px solid #ccc;
                                -webkit-transition: .25s ease-in-out;
                                transition: .25s ease-in-out;
                                -webkit-transition-delay: .2s;
                                transition-delay: .2s
                            }

                            #footer-form-wrap form input[type=submit] {
                                height: 70px;
                                border-radius: 80px;
                                padding: 0 30px;
                                width: 100%;
                                border: none;
                                opacity: 0;
                                cursor: pointer;
                                width: calc(100% + 40px)
                            }

                            .social-links {
                                margin-top: 3rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center
                            }

                            .social-links>a {
                                padding: .25rem 2rem;
                                position: relative;
                                -webkit-transition: .2s;
                                transition: .2s;
                                color: #7a7a8c;
                                position: relative
                            }

                            .social-links>a strong {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                display: block
                            }

                            .social-links>a:focus,
                            .social-links>a:hover {
                                color: #fff;
                                -webkit-text-fill-color: #fff
                            }

                            .social-links>a:focus strong,
                            .social-links>a:hover strong {
                                color: #fff;
                                -webkit-text-fill-color: #fff
                            }

                            .social-links>a:focus span,
                            .social-links>a:hover span {
                                opacity: 0
                            }

                            .social-links>a:focus::after,
                            .social-links>a:hover::after {
                                opacity: 1;
                                -webkit-transform: translate(-50%, 0);
                                transform: translate(-50%, 0);
                                -webkit-text-fill-color: #fff
                            }

                            .social-links>a::after {
                                content: "";
                                white-space: nowrap;
                                opacity: 0;
                                position: absolute;
                                bottom: .25rem;
                                left: 50%;
                                -webkit-transition: .25s;
                                transition: .25s;
                                -webkit-transform: translate(-50%, 20px);
                                transform: translate(-50%, 20px)
                            }

                            .social-links>a.social-link-facebook:hover::after {
                                content: "Like"
                            }

                            .social-links>a.social-link-twitter:hover::after {
                                content: "Follow"
                            }

                            .social-links>a.social-link-youtube:hover::after {
                                content: "Subscribe"
                            }

                            .social-links>a.social-link-spectrum:hover::after {
                                content: "Join"
                            }

                            .social-links>a.social-link-rss:hover::after {
                                content: "Get URL"
                            }

                            @media (max-width:800px) {
                                .social-links {
                                    display: none
                                }
                            }

                            .footer-colophon-wrapper {
                                background: #100e17
                            }

                            .footer-colophon {
                                padding: 2rem 2rem 6rem 2rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                color: #b1b1b1
                            }

                            .footer-colophon h4 {
                                color: #fff;
                                width: 100%
                            }

                            .footer-colophon>div {
                                max-width: 700px;
                                margin-right: auto
                            }

                            .footer-colophon>nav {
                                max-width: 300px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -ms-flex-wrap: wrap;
                                flex-wrap: wrap;
                                margin-left: 2rem
                            }

                            .footer-colophon>nav>a {
                                width: 50%;
                                color: #b1b1b1
                            }

                            .footer-colophon p span {
                                color: #ff8a00
                            }

                            @media (max-width:800px) {
                                .footer-colophon {
                                    -ms-flex-wrap: wrap;
                                    flex-wrap: wrap
                                }
                                .footer-colophon>div {
                                    width: 100%
                                }
                                .footer-colophon>nav {
                                    margin: 2rem 0
                                }
                            }

                            .footer-partners {
                                background: #100e17;
                                display: grid;
                                grid-gap: 2rem;
                                grid-template-columns: 1fr 1fr 1fr;
                                text-align: center;
                                font-size: 14px;
                                padding: 0 2rem
                            }

                            @media (max-width:1200px) {
                                .footer-partners {
                                    grid-gap: 1rem
                                }
                            }

                            @media (max-width:800px) {
                                .footer-partners {
                                    display: block
                                }
                            }

                            .footer-partner {
                                padding: 0 2rem;
                                margin: 2rem 0;
                                background: #201c29;
                                color: #a1a1af;
                                height: 100%;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                border-radius: 16px
                            }

                            .footer-partner a {
                                color: #fff
                            }

                            .footer-partner img,
                            .footer-partner svg {
                                display: block;
                                margin: 0 auto 1rem
                            }

                            .footer-partner p {
                                margin: 0
                            }

                            @media (max-width:1200px) {
                                .footer-partner {
                                    margin: 1rem 0;
                                    padding: 0 1rem
                                }
                            }

                            @media (max-width:800px) {
                                .footer-partner {
                                    margin: 0 0 1rem 0;
                                    padding: 2rem 1rem
                                }
                            }

                            .footer-partner-mediatemple svg {
                                width: 120px;
                                height: 52px
                            }

                            .footer-partner-codepen .codepen-logo {
                                max-width: 100%;
                                width: 200px;
                                height: 38px;
                                fill: none;
                                stroke: #fff;
                                stroke-width: 2.3;
                                stroke-linejoin: round;
                                stroke-linecap: round
                            }

                            .footer-partner-shoptalk .shoptalk-img {
                                width: 130px
                            }

                            body>svg {
                                position: absolute;
                                width: 0;
                                height: 0
                            }

                            body.single-post,
                            body.single-screenshot {
                                background: #fff
                            }

                            .article-and-sidebar {
                                display: grid;
                                grid-template-columns: minmax(0, 1fr) 300px;
                                grid-gap: 4rem;
                                max-width: var(--maxWidth);
                                margin: 0 auto;
                                padding: 4rem 0
                            }

                            @media (max-width:1200px) {
                                .article-and-sidebar {
                                    grid-gap: 2rem
                                }
                            }

                            @media (max-width:800px) {
                                .article-and-sidebar {
                                    display: block;
                                    padding-top: 0
                                }
                            }

                            .article-content {
                                line-height: 1.6;
                                color: #c2c2c2;
                                overflow-wrap: break-word
                            }

                            .article-content a {
                                border-bottom: 1px solid rgba(255, 255, 255, .2)
                            }

                            figure>figcaption {
                                font-size: .8rem;
                                color: #999;
                                display: block;
                                width: 80%;
                                padding-top: .5rem
                            }

                            figure>img {
                                display: block;
                                border-radius: 8px
                            }

                            iframe {
                                max-width: 100%
                            }

                            .sd-title,
                            .share-end {
                                display: none
                            }

                            .sharedaddy {
                                padding: .75rem 0;
                                white-space: nowrap;
                                color: #fff;
                                font-weight: 700
                            }

                            .sharedaddy ul {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .sharedaddy ul a {
                                border: 1px solid #fff;
                                margin-left: -1px;
                                border-radius: 0
                            }

                            .sharedaddy ul a:focus,
                            .sharedaddy ul a:hover {
                                text-decoration: none;
                                background: #ff8a00!important;
                                -webkit-text-fill-color: #fff!important
                            }

                            .sharedaddy ul li:first-child a {
                                border-top-left-radius: 4px;
                                border-bottom-left-radius: 4px
                            }

                            .sharedaddy ul li:nth-last-child(2) a {
                                border-top-right-radius: 4px;
                                border-bottom-right-radius: 4px
                            }

                            .sharedaddy ul {
                                font-size: 14px;
                                list-style: none;
                                margin: 0;
                                padding: 0
                            }

                            .sharedaddy ul::before {
                                content: "Share:";
                                margin-right: .5rem
                            }

                            .sharedaddy li {
                                display: inline-block;
                                margin: 0;
                                text-indent: 0!important
                            }

                            .sharedaddy li::before {
                                display: none
                            }

                            .sharedaddy a {
                                display: inline-block;
                                padding: .15rem .5rem;
                                font-weight: 400
                            }

                            .sharedaddy .share-count {
                                display: none
                            }

                            .on-light .sharedaddy {
                                color: #100e17
                            }

                            .on-light .sharedaddy ul a {
                                color: #100e17;
                                border-color: #c2c2c2
                            }

                            .article-series {
                                background: #ffeb3b;
                                margin: 0 0 1rem 0;
                                padding: 2rem;
                                counter-reset: article-series-counter;
                                border-radius: 8px
                            }

                            .article-series h4 {
                                padding: 0
                            }

                            .article-series>ol {
                                margin: 0;
                                list-style: none;
                                padding-left: 1.5rem
                            }

                            .article-series>ol li {
                                counter-increment: article-series-counter
                            }

                            .article-series>ol li::before {
                                content: "Part " counter(article-series-counter) ": "
                            }

                            .cp_embed_wrapper {
                                position: relative;
                                margin: 0 0 1rem 0;
                                clear: both;
                                border-radius: 4px;
                                overflow: hidden;
                                z-index: 1
                            }

                            .cp_embed_wrapper.dragging::before {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                z-index: 4000
                            }

                            .cp_embed_wrapper .cp_embed_iframe {
                                display: block
                            }

                            .win-size-grip {
                                position: absolute;
                                width: 24px;
                                height: 24px;
                                bottom: 0;
                                right: 0;
                                z-index: 5000;
                                cursor: nwse-resize;
                                -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
                                clip-path: polygon(100% 0, 100% 100%, 0 100%);
                                background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .5) 2px, #000 2px, #000 4px)
                            }

                            .mega-header {
                                background: #100e17;
                                color: #fff;
                                position: relative;
                                overflow: hidden;
                                padding: 4rem 2rem 2rem 2rem
                            }

                            @media (max-width:800px) {
                                .mega-header {
                                    padding: 1rem
                                }
                            }

                            .mega-header-inside {
                                display: grid;
                                grid-template-columns: minmax(200px, 1fr) 300px;
                                grid-gap: 4rem;
                                max-width: var(--maxWidth);
                                margin: 0 auto
                            }

                            @media (max-width:800px) {
                                .mega-header-inside {
                                    display: block
                                }
                            }

                            .mega-header-header {
                                position: relative;
                                z-index: 1;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column
                            }

                            .mega-header-author {
                                background: 0 0;
                                overflow: visible;
                                margin: 0 0 2rem 0
                            }

                            .mega-header-author .avatar {
                                border-radius: 50%
                            }

                            .mega-header-author .author-avatar {
                                grid-area: auto
                            }

                            .mega-header-author .author-avatar img {
                                width: 148px;
                                margin: 0 0 22px 27px
                            }

                            .mega-header-author .author-avatar .half-circle {
                                width: 200px;
                                height: 108px
                            }

                            .mega-header-author .mega-header-inside {
                                display: grid!important;
                                grid-template-columns: 200px 1fr;
                                grid-gap: 2rem
                            }

                            @media (max-width:800px) {
                                .mega-header-author .mega-header-inside {
                                    grid-template-columns: 100px 1fr;
                                    grid-gap: 1rem
                                }
                                .mega-header-author .mega-header-inside .author-avatar img {
                                    width: 74px;
                                    margin: 0 0 8px 13px
                                }
                                .mega-header-author .mega-header-inside .author-avatar .half-circle {
                                    width: 100px;
                                    height: 54px
                                }
                            }

                            .author-subhead {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                font-size: .66rem;
                                margin: 0 0 .25rem 0
                            }

                            .author-bio {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                color: #da1b60;
                                font-size: 1.5rem;
                                margin: 0;
                                width: 70%
                            }

                            .header-breadcrumbs {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                background: #100e17;
                                padding: 6rem 2rem
                            }

                            .header-breadcrumbs span {
                                font-size: 18px
                            }

                            .header-breadcrumbs span.breadcrumb-separator {
                                color: #312d3c;
                                font-weight: 700
                            }

                            .header-breadcrumbs span a {
                                color: #7a7a8c;
                                display: inline-block;
                                padding: .25rem
                            }

                            .header-breadcrumbs .breadcrumb_last {
                                display: block
                            }

                            @media (max-width:800px) {
                                .header-breadcrumbs .breadcrumb_last {
                                    font-size: 1.8rem
                                }
                            }

                            @media (max-width:1200px) {
                                .header-breadcrumbs {
                                    padding: 4rem 2rem
                                }
                            }

                            @media (max-width:800px) {
                                .header-breadcrumbs {
                                    padding: 2rem 1rem
                                }
                            }

                            @media (max-width:800px) {
                                .header-breadcrumbs-inside span {
                                    font-size: 14px
                                }
                            }

                            body.page-template-guide-special-php .header-gradient-content-inside,
                            body.post-template-guide-special-php .header-gradient-content-inside,
                            body.single-guides .header-gradient-content-inside {
                                -webkit-box-pack: end;
                                -ms-flex-pack: end;
                                justify-content: flex-end
                            }

                            @media (min-width:1200px) {
                                body.page-template-guide-special-php .header-gradient-content-inside .sharedaddy,
                                body.post-template-guide-special-php .header-gradient-content-inside .sharedaddy,
                                body.single-guides .header-gradient-content-inside .sharedaddy {
                                    padding: 2rem 0
                                }
                            }

                            .header-guides {
                                background: #100e17;
                                color: #fff;
                                position: relative;
                                padding: 2rem 2rem 5.2rem 2rem
                            }

                            .header-guides .blob-circle {
                                position: absolute;
                                width: 500px;
                                height: 500px;
                                top: -200px;
                                -webkit-transform: rotate(-120deg);
                                transform: rotate(-120deg);
                                right: 100px;
                                left: auto;
                                z-index: 1;
                                display: block
                            }

                            @media (max-width:1200px) {
                                .header-guides .blob-circle {
                                    display: none
                                }
                            }

                            .header-guides .article-content-meta {
                                grid-template-columns: -webkit-min-content -webkit-min-content;
                                grid-template-columns: min-content min-content
                            }

                            .header-guides .article-comments-meta,
                            .header-guides .author-avatar,
                            .header-guides .author-name-area {
                                display: none
                            }

                            .header-guides .created {
                                grid-column: 1/2;
                                white-space: nowrap
                            }

                            .header-guides .updated {
                                grid-column: 2/3;
                                white-space: nowrap
                            }

                            @media (max-width:1200px) {
                                .header-guides {
                                    padding: 1rem
                                }
                            }

                            .header-guides-inside {
                                position: relative;
                                z-index: 2;
                                display: grid;
                                grid-template-columns: 1fr 300px;
                                grid-gap: 4rem
                            }

                            @media (max-width:1200px) {
                                .header-guides-inside {
                                    display: block
                                }
                            }

                            .guide-sponsor {
                                background: #201c29;
                                color: #a1a1af;
                                padding: 2rem;
                                -webkit-box-shadow: 0 0 5rem #100e17;
                                box-shadow: 0 0 5rem #100e17;
                                position: relative;
                                z-index: 3;
                                border-radius: 1rem;
                                max-width: 600px;
                                position: absolute;
                                bottom: calc(-3rem - 66px - 66px);
                                left: 0;
                                display: grid;
                                grid-template-columns: 1fr 75px;
                                grid-gap: 1rem;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .guide-sponsor h5 {
                                color: #fff
                            }

                            .guide-sponsor p {
                                margin: 0
                            }

                            .guide-sponsor .monthly-sponsor-text {
                                color: #a1a1af;
                                font-size: 16px
                            }

                            @media (max-width:1200px) {
                                .guide-sponsor {
                                    display: none
                                }
                            }

                            .header-with-bottom-gradient {
                                border-bottom-right-radius: 200px;
                                position: relative;
                                z-index: 1
                            }

                            @media (max-width:800px) {
                                .header-with-bottom-gradient {
                                    border-bottom-right-radius: 100px
                                }
                            }

                            .header-gradient-after {
                                background-image: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to right, #ff8a00, #da1b60);
                                position: relative
                            }

                            .header-gradient-content {
                                padding: calc(200px + 1rem) 2rem 0 2rem;
                                margin-top: -200px;
                                overflow: hidden
                            }

                            @media (max-width:800px) {
                                .header-gradient-content {
                                    padding-left: 1rem;
                                    padding-right: 1rem
                                }
                            }

                            .header-gradient-content-inside {
                                max-width: var(--maxWidth);
                                margin: 0 auto;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -ms-flex-wrap: wrap;
                                flex-wrap: wrap;
                                -webkit-box-pack: justify;
                                -ms-flex-pack: justify;
                                justify-content: space-between;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .header-gradient-content-inside .sharedaddy {
                                -webkit-box-ordinal-group: 3;
                                -ms-flex-order: 2;
                                order: 2;
                                padding: 0;
                                margin-bottom: 1rem
                            }

                            .header-gradient-content-inside p a:hover {
                                -webkit-text-fill-color: #201c29!important
                            }

                            .header-gradient-sponsor {
                                white-space: nowrap
                            }

                            .header-gradient-sponsor p {
                                margin-bottom: 1rem
                            }

                            .article-content-meta {
                                display: grid;
                                grid-template-columns: 80px auto 1fr;
                                grid-template-areas: "avatar author comments" "avatar published updated";
                                grid-gap: .5rem 2rem;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                margin: 0 0 1.5rem 0
                            }

                            @media (max-width:800px) {
                                .article-content-meta {
                                    grid-template-columns: 60px auto 1fr;
                                    grid-gap: .75rem;
                                    font-size: .7rem
                                }
                            }

                            .header-breadcrumbs .article-content-meta {
                                grid-template-columns: 80px -webkit-min-content -webkit-min-content -webkit-min-content;
                                grid-template-columns: 80px min-content min-content min-content;
                                grid-template-areas: "avatar author comments published updated";
                                white-space: nowrap
                            }

                            @media (max-width:1200px) {
                                .header-breadcrumbs .article-content-meta {
                                    grid-template-columns: 60px -webkit-min-content -webkit-min-content;
                                    grid-template-columns: 60px min-content min-content;
                                    grid-template-areas: "avatar author comments" "avatar published updated"
                                }
                            }

                            .article-content-meta.article-content-meta-sponsored {
                                grid-template-columns: -webkit-min-content -webkit-min-content;
                                grid-template-columns: min-content min-content;
                                grid-template-areas: "published updated"
                            }

                            .article-publication-meta {
                                margin: 0 0 .5rem 0
                            }

                            .article-publication-meta>strong {
                                margin: 0 .3rem 0 0
                            }

                            .related-posts {
                                background: #100e17;
                                padding: 2rem 2rem 0
                            }

                            @media (max-width:800px) {
                                .related-posts {
                                    padding: 2rem 1rem 0
                                }
                            }

                            body.category-sponsored .bsap-doubles,
                            body.category-sponsored .jp-relatedposts,
                            body.single-guides .bsap-doubles,
                            body.single-guides .jp-relatedposts,
                            body.single-screenshot .bsap-doubles,
                            body.single-screenshot .jp-relatedposts {
                                display: none!important
                            }

                            .jp-relatedposts-headline {
                                display: none
                            }

                            .jp-relatedposts-items {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex
                            }

                            @media (max-width:800px) {
                                .jp-relatedposts-items {
                                    display: block
                                }
                                .jp-relatedposts-items .jp-relatedposts-post {
                                    width: 100%;
                                    margin: 0 0 .5rem 0
                                }
                            }

                            .jp-relatedposts-post {
                                font-size: .75rem;
                                background: #201c29;
                                border: 1px solid #312d3c;
                                -webkit-box-shadow: 0 4px 80px #000;
                                box-shadow: 0 4px 80px #000;
                                border-radius: 8px;
                                padding: 2rem;
                                margin-right: 1rem;
                                overflow: hidden;
                                position: relative;
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1;
                                width: 33.33%;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column
                            }

                            .jp-relatedposts-post:last-child {
                                margin-right: 0
                            }

                            .jp-relatedposts-post-img {
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%!important;
                                -o-object-fit: cover;
                                object-fit: cover;
                                opacity: .8;
                                mix-blend-mode: overlay
                            }

                            .jp-relatedposts-post-title {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-size: 1.4rem;
                                margin: 0 0 .5rem 0;
                                position: relative
                            }

                            .jp-relatedposts-post-date {
                                color: #7a7a8c;
                                display: block;
                                margin: 0 0 .25rem 0;
                                -webkit-box-ordinal-group: 0;
                                -ms-flex-order: -1;
                                order: -1;
                                position: relative;
                                z-index: 8
                            }

                            .jp-relatedposts-post-context {
                                display: none!important
                            }

                            .jp-relatedposts-post-excerpt {
                                color: #a1a1af;
                                position: relative;
                                display: -webkit-box;
                                -webkit-line-clamp: 6;
                                -webkit-box-orient: vertical;
                                text-overflow: ellipsis;
                                overflow: hidden;
                                margin: 0
                            }

                            .author-avatar {
                                grid-area: avatar;
                                -ms-flex-item-align: start;
                                align-self: start;
                                position: relative
                            }

                            .author-avatar img {
                                border-radius: 50%;
                                width: 60px;
                                height: 60px;
                                margin: 12px 10px;
                                -webkit-filter: grayscale(100%);
                                filter: grayscale(100%)
                            }

                            .author-avatar .half-circle {
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                width: 80px;
                                height: 56px;
                                fill: none;
                                stroke: url(#orange-to-pink);
                                stroke-width: 8;
                                stroke-linecap: round;
                                pointer-events: none
                            }

                            @media (max-width:800px) {
                                .author-avatar img {
                                    width: 35px;
                                    height: 35px
                                }
                                .author-avatar .half-circle {
                                    width: 55px;
                                    height: 40px
                                }
                            }

                            .author-name-prefix,
                            .comments-prefix,
                            .created-prefix,
                            .updated-prefix {
                                color: #7a7a8c
                            }

                            .author-name-area {
                                grid-area: author
                            }

                            @media (max-width:800px) {
                                .author-name-area {
                                    margin-right: 1rem
                                }
                            }

                            .article-comments-meta {
                                grid-area: comments
                            }

                            .author-name,
                            .comments-link {
                                font-weight: 500
                            }

                            .number-of-comments {
                                display: block
                            }

                            .comments-link {
                                display: inline-block;
                                position: relative;
                                padding-right: 30px
                            }

                            .comments-link .icon-arrow-right {
                                width: 24px;
                                height: 24px;
                                position: absolute;
                                right: 0;
                                top: 50%;
                                -webkit-transform: translate(0, -50%);
                                transform: translate(0, -50%)
                            }

                            @media (max-width:800px) {
                                .comments-link .icon-arrow-right {
                                    display: none
                                }
                            }

                            .comments-link:hover .icon-arrow-right {
                                -webkit-transform: translate(1px, -50%);
                                transform: translate(1px, -50%)
                            }

                            .created time,
                            .updated time {
                                color: #fff
                            }

                            .created {
                                grid-area: published
                            }

                            .updated {
                                grid-area: updated
                            }

                            .link-read-more,
                            .read-more {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                font-weight: 700;
                                border-bottom: 1px solid #da1b60!important;
                                padding-bottom: .15rem
                            }

                            .link-read-more:focus,
                            .link-read-more:hover,
                            .read-more:focus,
                            .read-more:hover {
                                border-bottom: 1px solid #fff!important
                            }

                            .link-read-more svg,
                            .read-more svg {
                                margin: 0 0 0 .25rem;
                                position: relative;
                                top: .25rem
                            }

                            .article-card {
                                margin: 0 0 8rem 0;
                                position: relative;
                                overflow: hidden
                            }

                            .article-card .article-article {
                                position: relative;
                                z-index: 1
                            }

                            .article-card.link:not(.module-sponsored) h2 {
                                margin-bottom: 2.6rem
                            }

                            .article-card.link .read-more {
                                display: none
                            }

                            @media (max-width:800px) {
                                .article-card .article-content {
                                    padding-right: 15%
                                }
                                .article-card .article-content>* {
                                    display: none
                                }
                                .article-card .article-content>p:first-of-type {
                                    display: block;
                                    display: -webkit-box;
                                    -webkit-line-clamp: 2;
                                    -webkit-box-orient: vertical;
                                    overflow: hidden
                                }
                            }

                            .article-card .article-content-meta .author-avatar,
                            .article-card .article-publication-meta .author-avatar {
                                grid-area: auto
                            }

                            .article-content-meta,
                            .article-publication-meta {
                                white-space: nowrap;
                                font-size: 16px
                            }

                            @media (max-width:800px) {
                                .article-content-meta,
                                .article-publication-meta {
                                    font-size: 14px
                                }
                            }

                            .link-shared-by {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                width: -webkit-max-content;
                                width: -moz-max-content;
                                width: max-content;
                                background: #100e17;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                font-size: .8rem;
                                line-height: 1.2;
                                color: #7a7a8c;
                                padding-right: 1rem;
                                margin: -2.4rem 0 1rem 0
                            }

                            .link-shared-by span {
                                color: #b1b1b1
                            }

                            .link-shared-by svg {
                                fill: #ff8a00
                            }

                            .link-shared-by .author-avatar {
                                margin-right: 1rem
                            }

                            .link-shared-by:focus,
                            .link-shared-by:hover {
                                -webkit-text-fill-color: #c2c2c2!important;
                                color: #c2c2c2!important;
                                background: #100e17!important
                            }

                            .link-shared-by:focus span,
                            .link-shared-by:hover span {
                                -webkit-text-fill-color: #fff!important;
                                color: #fff!important
                            }

                            .link-line {
                                border-top: 5px solid #201c29;
                                border-right: 5px solid #201c29;
                                border-top-right-radius: 2rem;
                                padding-right: 2rem
                            }

                            .link-links {
                                font-weight: 700;
                                color: #7a7a8c;
                                margin: 0 0 1.5rem 0
                            }

                            .link-links a:focus,
                            .link-links a:hover {
                                -webkit-text-fill-color: #fff!important;
                                color: #fff
                            }

                            .icon-link {
                                width: 20px;
                                height: 12px;
                                fill: #fff
                            }

                            .tags {
                                margin: 1rem 0 2rem 0;
                                padding: .5rem 0 1rem;
                                line-height: 1.8
                            }

                            @media (max-width:800px) {
                                .tags {
                                    margin: 0
                                }
                            }

                            .tags a {
                                color: #7a7a8c;
                                text-transform: uppercase;
                                font-weight: 700;
                                font-size: .66rem;
                                white-space: nowrap;
                                border: 3px solid #28242f;
                                border-radius: 2rem;
                                padding: .2rem .85rem .25rem .85rem
                            }

                            .tags a:focus,
                            .tags a:hover {
                                color: #03a9f4;
                                border-color: #fff
                            }

                            .header-card {
                                background-image: -webkit-gradient(linear, left bottom, left top, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to top, #ff8a00, #da1b60);
                                position: relative;
                                border-radius: 16px;
                                padding: 2rem;
                                margin: 0 4rem 0 0;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-pack: end;
                                -ms-flex-pack: end;
                                justify-content: flex-end;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 320px;
                                flex: 0 0 320px
                            }

                            .header-card p {
                                margin: 0;
                                font-size: .8rem
                            }

                            @media (max-width:1200px) {
                                .header-card {
                                    -webkit-writing-mode: vertical-rl;
                                    -ms-writing-mode: tb-rl;
                                    writing-mode: vertical-rl;
                                    -webkit-transform: rotate(180deg);
                                    transform: rotate(180deg);
                                    -webkit-box-flex: 0;
                                    -ms-flex: 0;
                                    flex: 0;
                                    width: 110px;
                                    margin-right: 1rem
                                }
                                .header-card br {
                                    display: none
                                }
                                .header-card a::after {
                                    display: none
                                }
                            }

                            .header-card-title {
                                font-size: 1.6rem;
                                margin: 0 0 .5rem 0
                            }

                            .popular-articles {
                                -webkit-box-sizing: content-box;
                                box-sizing: content-box;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                width: calc(100vw - 71px);
                                margin: 0 0 5rem 0;
                                padding: 2rem 0
                            }

                            @media (max-width:1200px) {
                                .popular-articles {
                                    scrollbar-color: #201c29;
                                    scrollbar-width: 10px;
                                    width: 100%;
                                    padding-bottom: 2rem;
                                    margin-bottom: 6rem;
                                    overflow-x: scroll;
                                    -webkit-overflow-scrolling: touch;
                                    -ms-scroll-snap-points-x: repeat(250px);
                                    scroll-snap-points-x: repeat(250px);
                                    -ms-scroll-snap-type: mandatory;
                                    scroll-snap-type: mandatory
                                }
                                .popular-articles::-webkit-scrollbar {
                                    width: 10px;
                                    height: 10px
                                }
                                .popular-articles::-webkit-scrollbar-thumb {
                                    background: #201c29;
                                    border-radius: 10px;
                                    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                                }
                                .popular-articles::-webkit-scrollbar-track {
                                    background: linear-gradient(to right, #201c29, #201c29 1px, #17141d 1px, #17141d)
                                }
                                .popular-articles .mini-card {
                                    scroll-snap-align: start
                                }
                            }

                            @media (max-width:1200px) {
                                .popular-articles {
                                    padding-left: 0
                                }
                            }

                            .popular-header {
                                margin: 3rem 0
                            }

                            .popular-header .edit-popular {
                                position: absolute;
                                top: 5px;
                                right: 5px
                            }

                            .mini-card-grid {
                                scrollbar-color: #201c29;
                                scrollbar-width: 10px;
                                scrollbar-gutter: always;
                                padding: 3rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                overflow-x: scroll;
                                -webkit-overflow-scrolling: touch
                            }

                            .mini-card-grid::-webkit-scrollbar {
                                width: 10px;
                                height: 10px
                            }

                            .mini-card-grid::-webkit-scrollbar-thumb {
                                background: #201c29;
                                border-radius: 10px;
                                -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                            }

                            .mini-card-grid::-webkit-scrollbar-track {
                                background: linear-gradient(to right, #201c29, #201c29 1px, #17141d 1px, #17141d)
                            }

                            @media (max-width:1200px) {
                                .mini-card-grid {
                                    overflow-x: visible
                                }
                            }

                            .mini-card {
                                min-width: 300px;
                                min-height: 350px;
                                padding: 1.5rem;
                                border-radius: 16px;
                                background: #17141d;
                                -webkit-box-shadow: -1rem 0 3rem #000;
                                box-shadow: -1rem 0 3rem #000;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-transition: .2s;
                                transition: .2s;
                                margin: 0
                            }

                            .mini-card h2 {
                                font-size: 20px;
                                margin: .25rem 0 auto 0
                            }

                            .mini-card:not(:first-child) {
                                margin-left: -130px
                            }

                            .mini-card .tags a {
                                font-size: .5rem
                            }

                            .mini-card:focus-within,
                            .mini-card:hover {
                                -webkit-transform: translate(0, -1rem);
                                transform: translate(0, -1rem)
                            }

                            .mini-card:focus-within~.mini-card,
                            .mini-card:hover~.mini-card {
                                -webkit-transform: translateX(130px);
                                transform: translateX(130px)
                            }

                            @media (max-width:1200px) {
                                .mini-card {
                                    min-width: 220px
                                }
                                .mini-card:not(:first-child) {
                                    margin-left: -30px
                                }
                                .mini-card:hover {
                                    -webkit-transform: translate(0, -1rem);
                                    transform: translate(0, -1rem)
                                }
                                .mini-card:hover~.mini-card {
                                    -webkit-transform: translateX(30px);
                                    transform: translateX(30px)
                                }
                            }

                            @media (max-width:800px) {
                                .mini-card {
                                    min-width: 190px
                                }
                                .mini-card:not(:first-child) {
                                    margin-left: -10px
                                }
                                .mini-card:hover {
                                    -webkit-transform: translate(0, -1rem);
                                    transform: translate(0, -1rem)
                                }
                                .mini-card:hover~.mini-card {
                                    -webkit-transform: translateX(10px);
                                    transform: translateX(10px)
                                }
                            }

                            .mini-article-subhead {
                                font-size: 14px;
                                margin: 0 0 1rem 0
                            }

                            .mini-article-card-header {
                                margin-bottom: auto
                            }

                            .mini-article-meta {
                                font-size: 14px
                            }

                            .mini-article-meta .author-name {
                                display: block;
                                position: relative
                            }

                            .mini-article-meta .author-avatar img {
                                width: 40px;
                                height: 40px
                            }

                            .mini-article-meta .author-avatar .half-circle {
                                width: 60px;
                                height: 48px
                            }

                            .mini-article-byline {
                                margin: 3rem 0 0 0;
                                display: grid;
                                grid-template-columns: 75px 1fr;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .mini-article-byline .author-avatar,
                            .mini-article-byline .author-name-area {
                                grid-area: auto
                            }

                            .authors-page-wrap {
                                padding: 2rem
                            }

                            .related-ads-comments-wrap {
                                background: #100e17
                            }

                            .respond-area {
                                background: #100e17;
                                padding: 0 2rem;
                                margin: 0 auto
                            }

                            @media (max-width:800px) {
                                .respond-area {
                                    padding-left: 1rem;
                                    padding-right: 1rem
                                }
                            }

                            .comments-title {
                                clear: both;
                                padding-top: 6rem;
                                text-align: center
                            }

                            .comment-respond {
                                position: relative;
                                z-index: 2
                            }

                            .CommentForm li.comment.featured .comment-wrap,
                            .comment ul li.comment.featured .comment-wrap,
                            .commentlist li.comment.featured .comment-wrap {
                                background-image: url(images/featured-comment.svg);
                                background-repeat: no-repeat;
                                background-size: contain;
                                background-position: top center
                            }

                            .CommentForm>li.comment,
                            .comment ul>li.comment,
                            .commentlist>li.comment {
                                list-style: none;
                                position: relative;
                                margin: 0 0 2rem 0
                            }

                            .CommentForm>li.comment.bypostauthor .comment-wrap,
                            .CommentForm>li.comment.comment-author-chriscoyier .comment-wrap,
                            .comment ul>li.comment.bypostauthor .comment-wrap,
                            .comment ul>li.comment.comment-author-chriscoyier .comment-wrap,
                            .commentlist>li.comment.bypostauthor .comment-wrap,
                            .commentlist>li.comment.comment-author-chriscoyier .comment-wrap {
                                -webkit-box-shadow: 0 0 0 2px #ff8a00;
                                box-shadow: 0 0 0 2px #ff8a00
                            }

                            .CommentForm>li.comment.buried,
                            .comment ul>li.comment.buried,
                            .commentlist>li.comment.buried {
                                max-height: 50px;
                                -webkit-filter: blur(5px);
                                filter: blur(5px);
                                overflow: hidden
                            }

                            .CommentForm>li.comment.buried:focus,
                            .CommentForm>li.comment.buried:hover,
                            .comment ul>li.comment.buried:focus,
                            .comment ul>li.comment.buried:hover,
                            .commentlist>li.comment.buried:focus,
                            .commentlist>li.comment.buried:hover {
                                opacity: .6
                            }

                            .CommentForm>li.comment.buried .reply,
                            .comment ul>li.comment.buried .reply,
                            .commentlist>li.comment.buried .reply {
                                display: none
                            }

                            .CommentForm>li.comment li.comment,
                            .comment ul>li.comment li.comment,
                            .commentlist>li.comment li.comment {
                                margin-left: 8rem
                            }

                            .CommentForm>li.comment li.comment .comment-wrap,
                            .comment ul>li.comment li.comment .comment-wrap,
                            .commentlist>li.comment li.comment .comment-wrap {
                                background: #100e17;
                                -webkit-box-shadow: none;
                                box-shadow: none
                            }

                            @media (max-width:800px) {
                                .CommentForm>li.comment li.comment,
                                .comment ul>li.comment li.comment,
                                .commentlist>li.comment li.comment {
                                    margin-left: 0;
                                    padding-left: 1rem
                                }
                            }

                            @media (max-width:800px) {
                                .CommentForm>li.comment,
                                .comment ul>li.comment,
                                .commentlist>li.comment {
                                    padding: 10px
                                }
                                .CommentForm>li.comment .grid,
                                .comment ul>li.comment .grid,
                                .commentlist>li.comment .grid {
                                    padding: 0
                                }
                                .CommentForm>li.comment .comment,
                                .comment ul>li.comment .comment,
                                .commentlist>li.comment .comment {
                                    width: calc(100% - 20px)
                                }
                            }

                            .CommentForm>li.comment .comment-respond,
                            .comment ul>li.comment .comment-respond,
                            .commentlist>li.comment .comment-respond {
                                position: relative;
                                padding: 1rem
                            }

                            .CommentForm .comment-content,
                            .comment ul .comment-content,
                            .commentlist .comment-content {
                                overflow: hidden
                            }

                            .CommentForm .comment-wrap,
                            .comment ul .comment-wrap,
                            .commentlist .comment-wrap {
                                position: relative;
                                display: grid;
                                grid-template-columns: 80px minmax(100px, 1fr) 160px;
                                grid-gap: 2rem;
                                background: #17141d;
                                color: #c2c2c2;
                                -webkit-box-shadow: 0 4px 80px #070509;
                                box-shadow: 0 4px 80px #070509;
                                padding: 2rem;
                                border-radius: 16px
                            }

                            .CommentForm .comment-wrap .author-avatar,
                            .comment ul .comment-wrap .author-avatar,
                            .commentlist .comment-wrap .author-avatar {
                                margin: 0;
                                -ms-flex-item-align: start;
                                align-self: start;
                                grid-area: auto
                            }

                            .CommentForm .comment-wrap .author-avatar .half-circle,
                            .comment ul .comment-wrap .author-avatar .half-circle,
                            .commentlist .comment-wrap .author-avatar .half-circle {
                                stroke: #7a7a8c
                            }

                            .CommentForm .comment-wrap:target,
                            .comment ul .comment-wrap:target,
                            .commentlist .comment-wrap:target {
                                border: 1px solid #ffeb3b
                            }

                            @media (max-width:800px) {
                                .CommentForm .comment-wrap,
                                .comment ul .comment-wrap,
                                .commentlist .comment-wrap {
                                    display: block;
                                    padding: 1rem
                                }
                            }

                            .CommentForm .comment-body,
                            .comment ul .comment-body,
                            .commentlist .comment-body {
                                padding: 0
                            }

                            .CommentForm .comment-reply-link,
                            .comment ul .comment-reply-link,
                            .commentlist .comment-reply-link {
                                width: 100%;
                                text-align: center;
                                margin: 0 0 1rem 0
                            }

                            .CommentForm .edit-link,
                            .comment ul .edit-link,
                            .commentlist .edit-link {
                                position: absolute;
                                right: 0;
                                top: 0;
                                width: 30px;
                                margin-left: 5px;
                                font-size: 10px
                            }

                            .CommentForm .feature-bury-actions,
                            .comment ul .feature-bury-actions,
                            .commentlist .feature-bury-actions {
                                position: absolute;
                                top: 14px;
                                left: 100%;
                                margin-left: 5px;
                                width: 100px;
                                font-size: 10px
                            }

                            .CommentForm .feature-bury-actions a,
                            .comment ul .feature-bury-actions a,
                            .commentlist .feature-bury-actions a {
                                display: block
                            }

                            .CommentForm .children,
                            .comment ul .children,
                            .commentlist .children {
                                margin: 2rem 0 4rem 0
                            }

                            .CommentForm .comment .respond,
                            .comment ul .comment .respond,
                            .commentlist .comment .respond {
                                clear: both;
                                padding: 1rem;
                                background: rgba(0, 0, 0, .1);
                                border-bottom: 1rem;
                                border-radius: 4px
                            }

                            .CommentForm .comment .respond .comments-title,
                            .comment ul .comment .respond .comments-title,
                            .commentlist .comment .respond .comments-title {
                                display: none
                            }

                            .respond {
                                display: grid;
                                grid-template-columns: 1fr 300px;
                                grid-gap: 2rem
                            }

                            @media (max-width:800px) {
                                .respond {
                                    display: block
                                }
                            }

                            .comment-form-coc-area {
                                position: relative;
                                padding: 5rem 1rem;
                                text-align: center
                            }

                            .comment-form-coc-area .circle-text-coc {
                                top: 0;
                                left: 0;
                                right: auto;
                                color: #939393;
                                pointer-events: none;
                                z-index: 1
                            }

                            .comment-form-coc-area>a {
                                position: relative;
                                z-index: 1
                            }

                            .comment-author {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                color: #fff;
                                font-weight: 700;
                                font-size: 24px
                            }

                            .comment-time {
                                margin: 0 0 1rem 0
                            }

                            .comment-time a {
                                color: #da1b60
                            }

                            .view-comments-button {
                                display: none
                            }

                            @media (max-width:800px) {
                                .view-comments-button {
                                    display: block;
                                    margin: 40px 0 60px 0
                                }
                            }

                            .textarea-usage {
                                color: #999;
                                float: right;
                                width: 50%;
                                text-align: right;
                                font-size: .8rem
                            }

                            #comment,
                            .markdown-comment-preview {
                                height: 180px
                            }

                            .markdown-comment-preview {
                                display: none;
                                background: #201c29;
                                border: 2px dashed #7a7a8c;
                                -webkit-box-shadow: 0 0 1rem #100e17;
                                box-shadow: 0 0 1rem #100e17;
                                padding: 1rem;
                                border-radius: 8px;
                                overflow: auto
                            }

                            .comments-closed {
                                background: #100e17;
                                border: 2px solid #da1b60;
                                padding: 2rem;
                                border-radius: 8px;
                                text-align: center
                            }

                            .comment-awaiting-moderation {
                                background: #ff8a00;
                                color: #fff;
                                padding: 2rem
                            }

                            #commentform {
                                display: grid;
                                grid-gap: 1rem;
                                grid-template-columns: 1fr 1fr
                            }

                            #commentform label {
                                display: block
                            }

                            #commentform .comment-notes,
                            #commentform .required {
                                display: none
                            }

                            #commentform label[for=comment] {
                                position: absolute!important;
                                clip: rect(1px, 1px, 1px, 1px)
                            }

                            #author,
                            #email,
                            #url,
                            textarea#comment {
                                width: 100%;
                                background: #312d3c;
                                color: #fff;
                                padding: 1rem;
                                border-radius: 8px;
                                border: 2px solid transparent
                            }

                            #author:focus,
                            #email:focus,
                            #url:focus,
                            textarea#comment:focus {
                                border-color: #da1b60
                            }

                            .comment-form-comment {
                                grid-column: 1/-1;
                                padding: 2px;
                                border-radius: 8px
                            }

                            .comment-form-url {
                                grid-column: 1/-1
                            }

                            .comment-form-cookies-consent,
                            .comment-subscription-form,
                            .mc4wp-checkbox {
                                color: #7a7a8c;
                                grid-column: 1/-1;
                                margin: 0;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .comment-form-cookies-consent input[type=checkbox],
                            .comment-subscription-form input[type=checkbox],
                            .mc4wp-checkbox input[type=checkbox] {
                                margin-right: .5rem;
                                position: relative;
                                top: -2px
                            }

                            .form-submit {
                                grid-column: 1/-1;
                                text-align: right
                            }

                            .mc4wp-checkbox label {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            .comment-reminders {
                                font-size: 16px;
                                color: #7a7a8c
                            }

                            .breadcrumbs {
                                margin: 0 0 3rem 0;
                                position: relative;
                                white-space: nowrap
                            }

                            .wp_page_numbers {
                                padding-right: 1rem;
                                width: 100%
                            }

                            .wp_page_numbers ul {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                margin: 0
                            }

                            @media (max-width:800px) {
                                .wp_page_numbers ul {
                                    line-height: 2.6
                                }
                            }

                            .wp_page_numbers li a {
                                display: block;
                                padding: 0 .5rem;
                                border-radius: 100%;
                                margin-right: .25rem;
                                color: #b1b1b1
                            }

                            .wp_page_numbers li a:focus,
                            .wp_page_numbers li a:hover {
                                background: #939393;
                                color: #000;
                                -webkit-text-fill-color: #000
                            }

                            .wp_page_numbers li.active_page a {
                                border: 3px solid #28242f;
                                font-weight: 700;
                                color: #fff
                            }

                            .wp_page_numbers li.space {
                                margin-left: 5px
                            }

                            li.breadcrumbs-next-page,
                            li.breadcrumbs-prev-page {
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            li.breadcrumbs-next-page a,
                            li.breadcrumbs-prev-page a {
                                color: #fff;
                                font-weight: 700;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center
                            }

                            li.breadcrumbs-next-page .pagination-arrow,
                            li.breadcrumbs-prev-page .pagination-arrow {
                                -webkit-transform: rotate(180deg);
                                transform: rotate(180deg);
                                margin-right: .5rem
                            }

                            li.breadcrumbs-next-page {
                                margin-left: auto;
                                -webkit-box-pack: end;
                                -ms-flex-pack: end;
                                justify-content: flex-end
                            }

                            li.breadcrumbs-next-page .pagination-arrow {
                                -webkit-transform: rotate(0);
                                transform: rotate(0);
                                margin-left: .5rem
                            }

                            .monthly-mixup {
                                --borderWidth: 4px;
                                background: #100e17;
                                position: relative
                            }

                            @media (min-width:800px) {
                                .monthly-mixup {
                                    display: grid;
                                    grid-template-columns: repeat(6, 1fr);
                                    padding: 10rem 0 10rem 0
                                }
                                .monthly-mixup>h2 {
                                    grid-column: 2/4
                                }
                                .monthly-mixup .mixup-background-star {
                                    position: absolute;
                                    top: 5%;
                                    right: 16.66%;
                                    width: 56.14%;
                                    height: 100%;
                                    fill: url(#orange-to-pink);
                                    pointer-events: none;
                                    -webkit-filter: saturate(125%);
                                    filter: saturate(125%)
                                }
                                .monthly-mixup .mixup-card {
                                    position: relative;
                                    padding: 1.5rem;
                                    background: #100e17;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-orient: vertical;
                                    -webkit-box-direction: normal;
                                    -ms-flex-direction: column;
                                    flex-direction: column;
                                    font-size: .75rem
                                }
                                .monthly-mixup .mixup-card:nth-of-type(1) {
                                    grid-column: 5/6;
                                    grid-row: 1/2;
                                    border-top: var(--borderWidth) solid #da1b60;
                                    border-left: var(--borderWidth) solid #da1b60;
                                    border-right: 1px solid #201c29;
                                    border-bottom: 1px solid #201c29;
                                    border-top-left-radius: 1rem;
                                    border-bottom-right-radius: 1rem;
                                    -webkit-transform: translateX(calc(var(--borderWidth) * -1));
                                    transform: translateX(calc(var(--borderWidth) * -1));
                                    width: calc(100% + var(--borderWidth))
                                }
                                .monthly-mixup .mixup-card:nth-of-type(2) {
                                    -webkit-box-shadow: 0 0 3rem #000;
                                    box-shadow: 0 0 3rem #000;
                                    border-bottom: 1px solid #201c29;
                                    z-index: 1;
                                    grid-column: 2/3;
                                    grid-row: 2/3
                                }
                                .monthly-mixup .mixup-card:nth-of-type(3) {
                                    grid-column: 4/5;
                                    grid-row: 2/3;
                                    border-bottom: var(--borderWidth) solid #da1b60;
                                    border-right: var(--borderWidth) solid #da1b60;
                                    border-bottom-right-radius: 1rem;
                                    border-top-left-radius: 1rem;
                                    z-index: 2
                                }
                                .monthly-mixup .mixup-card:nth-of-type(4) {
                                    grid-column: 2/3;
                                    grid-row: 3/4;
                                    border-left: var(--borderWidth) solid #da1b60;
                                    border-bottom: var(--borderWidth) solid #201c29
                                }
                                .monthly-mixup .mixup-card:nth-of-type(5) {
                                    grid-column: 3/4;
                                    grid-row: 3/4;
                                    border-left: var(--borderWidth) solid #da1b60;
                                    border-top: var(--borderWidth) solid #da1b60;
                                    border-top-left-radius: 1rem;
                                    -webkit-transform: translate(calc(var(--borderWidth) * -1), calc(var(--borderWidth) * -1));
                                    transform: translate(calc(var(--borderWidth) * -1), calc(var(--borderWidth) * -1));
                                    width: calc(100% + var(--borderWidth))
                                }
                                .monthly-mixup .mixup-card:nth-of-type(6) {
                                    -webkit-box-shadow: 0 0 3rem #000;
                                    box-shadow: 0 0 3rem #000;
                                    grid-column: 4/5;
                                    grid-row: 3/4
                                }
                                .monthly-mixup .mixup-card:nth-of-type(7) {
                                    grid-column: 5/6;
                                    grid-row: 4/5;
                                    border: 1px solid #201c29;
                                    border-top: 0;
                                    border-bottom-left-radius: 1rem;
                                    border-bottom-right-radius: 1rem
                                }
                                .monthly-mixup .mixup-card:nth-of-type(8) {
                                    grid-column: 2/3;
                                    grid-row: 4/5;
                                    border-left: var(--borderWidth) solid #da1b60;
                                    border-bottom: var(--borderWidth) solid #da1b60;
                                    border-right: var(--borderWidth) solid #da1b60;
                                    border-bottom-left-radius: 1rem;
                                    border-bottom-right-radius: 1rem;
                                    -webkit-transform: translateY(calc(var(--borderWidth) * -1));
                                    transform: translateY(calc(var(--borderWidth) * -1))
                                }
                                .monthly-mixup .mixup-card h3 {
                                    font-size: 1rem;
                                    margin: .5rem 0 0 0
                                }
                                .monthly-mixup .mixup-design-card-1 {
                                    position: relative;
                                    grid-column: 1/2;
                                    grid-row: 2/3;
                                    background: linear-gradient(225.71deg, #110e17 -5.46%, #da1b60 55.6%, #ff8a00 103.75%);
                                    border-top-right-radius: 1rem;
                                    border-top: var(--borderWidth) solid #da1b60;
                                    border-right: var(--borderWidth) solid #da1b60;
                                    -webkit-transform: translateX(var(--borderWidth));
                                    transform: translateX(var(--borderWidth));
                                    z-index: 2
                                }
                                .monthly-mixup .mixup-design-card-2 {
                                    position: relative;
                                    grid-column: 6/7;
                                    grid-row: 3/4;
                                    background: linear-gradient(134.47deg, #110e17 0, #da1b60 127.34%, #ff8a00 195.33%)
                                }
                                .monthly-mixup .mixup-design-card-3 {
                                    grid-column: 6/7;
                                    grid-row: 1/2;
                                    border-top: var(--borderWidth) solid #da1b60
                                }
                                .monthly-mixup .mixup-design-card-3::after {
                                    content: "";
                                    position: absolute;
                                    bottom: 0;
                                    left: -1px;
                                    height: 15px;
                                    width: var(--borderWidth);
                                    background: #100e17;
                                    z-index: 3
                                }
                                .monthly-mixup .mixup-card-header-video {
                                    margin-bottom: 3rem
                                }
                            }

                            @media (max-width:800px) {
                                .monthly-mixup {
                                    scrollbar-color: linear-gradient(to right, #da1b60, #ff8a00);
                                    scrollbar-width: 16px;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    padding: 3rem 0 1rem 0;
                                    margin: 2rem 1rem;
                                    overflow-x: auto;
                                    -webkit-overflow-scrolling: touch;
                                    -ms-scroll-snap-points-x: repeat(250px);
                                    scroll-snap-points-x: repeat(250px);
                                    -ms-scroll-snap-type: mandatory;
                                    scroll-snap-type: mandatory
                                }
                                .monthly-mixup::-webkit-scrollbar {
                                    width: 16px;
                                    height: 16px
                                }
                                .monthly-mixup::-webkit-scrollbar-thumb {
                                    background: -webkit-gradient(linear, left top, right top, from(#da1b60), to(#ff8a00));
                                    background: linear-gradient(to right, #da1b60, #ff8a00);
                                    border-radius: 16px;
                                    -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                                }
                                .monthly-mixup::-webkit-scrollbar-track {
                                    background: linear-gradient(to right, #201c29, #201c29 1px, #17141d 1px, #17141d)
                                }
                                .monthly-mixup h2 {
                                    position: absolute;
                                    top: 0;
                                    left: 0;
                                    width: 100%
                                }
                                .monthly-mixup .mixup-background-star {
                                    position: absolute;
                                    right: -85px;
                                    top: 0;
                                    width: 275px;
                                    height: 275px;
                                    fill: url(#orange-to-pink)
                                }
                                .monthly-mixup .mixup-card {
                                    position: relative;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-orient: vertical;
                                    -webkit-box-direction: normal;
                                    -ms-flex-direction: column;
                                    flex-direction: column;
                                    -webkit-box-pack: center;
                                    -ms-flex-pack: center;
                                    justify-content: center;
                                    background: #201c29;
                                    color: #a1a1af;
                                    -webkit-box-flex: 0;
                                    -ms-flex: 0 0 250px;
                                    flex: 0 0 250px;
                                    scroll-snap-align: center;
                                    -webkit-box-shadow: 4px 0 80px #000;
                                    box-shadow: 4px 0 80px #000;
                                    padding: 1rem;
                                    margin-right: 1rem;
                                    border-radius: 16px
                                }
                                .monthly-mixup .mixup-card h3 {
                                    font-size: 1.1rem
                                }
                            }

                            .monthly-mixup .mixup-card-header {
                                margin-bottom: auto
                            }

                            .monthly-mixup .mixup-card-title-video a:focus,
                            .monthly-mixup .mixup-card-title-video a:hover {
                                color: #fff;
                                -webkit-text-fill-color: #fff
                            }

                            .almanac-example {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                display: block;
                                padding-top: 3rem;
                                padding-bottom: 3rem
                            }

                            .mixup-card-sponsor {
                                grid-column: 1/3
                            }

                            .mixup-card-sponsor a {
                                font-weight: 700;
                                color: #ff8a00
                            }

                            .mixup-card-sponsor .monthly-sponsor-image {
                                max-width: 125px;
                                display: block;
                                margin: 0 auto
                            }

                            .single-ad {
                                width: 300px;
                                opacity: 0;
                                margin: 0 0 2rem 0;
                                position: relative
                            }

                            .single-ad .module {
                                margin: 0
                            }

                            .single-ad .module img {
                                width: 300px;
                                display: block;
                                border-radius: 8px;
                                -webkit-box-shadow: 0 0 30px rgba(16, 14, 23, .25);
                                box-shadow: 0 0 30px rgba(16, 14, 23, .25)
                            }

                            .single-ad>* {
                                position: relative
                            }

                            .single-ad::before {
                                content: "";
                                background: #201c29;
                                position: absolute;
                                top: -1rem;
                                right: -1rem;
                                width: 100%;
                                height: 100%;
                                border-radius: 16px;
                                padding-bottom: 1rem
                            }

                            @media (max-width:800px) {
                                .single-ad {
                                    display: none
                                }
                            }

                            .on-light .single-ad::before {
                                background: #f5f5f5
                            }

                            .on-light .single-ad .interlude .avatar {
                                border-color: #f5f5f5
                            }

                            .ad-5 {
                                -webkit-animation: ad_come_in 0s 1.2s forwards;
                                animation: ad_come_in 0s 1.2s forwards
                            }

                            .ad-4 {
                                -webkit-animation: ad_come_in .2s 1.2s forwards;
                                animation: ad_come_in .2s 1.2s forwards
                            }

                            .ad-3 {
                                -webkit-animation: ad_come_in .2s 1.4s forwards;
                                animation: ad_come_in .2s 1.4s forwards
                            }

                            .ad-2 {
                                -webkit-animation: ad_come_in .2s 1.6s forwards;
                                animation: ad_come_in .2s 1.6s forwards
                            }

                            .ad-1 {
                                -webkit-animation: ad_come_in .2s 1.8s forwards;
                                animation: ad_come_in .2s 1.8s forwards
                            }

                            @-webkit-keyframes ad_come_in {
                                100% {
                                    opacity: 1
                                }
                            }

                            @keyframes ad_come_in {
                                100% {
                                    opacity: 1
                                }
                            }

                            .interlude {
                                font-size: .66rem;
                                padding: 1rem 1rem 2rem 55px;
                                margin-left: 1rem;
                                color: #a1a1af;
                                white-space: normal;
                                text-align: left
                            }

                            .interlude .avatar {
                                position: absolute;
                                left: -1rem;
                                top: 1rem;
                                -webkit-filter: grayscale(100%);
                                filter: grayscale(100%);
                                border-radius: 50%;
                                width: 60px;
                                height: 60px;
                                border: 5px solid #201c29
                            }

                            .end-of-article-ads {
                                background: #100e17;
                                padding: 1rem 2rem
                            }

                            @media (max-width:800px) {
                                .end-of-article-ads {
                                    padding: 1rem
                                }
                            }

                            .bsap-doubles {
                                margin: 0 0 4rem 0
                            }

                            .bsap-doubles.side-by-side .bsa_it {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -ms-flex-wrap: wrap;
                                flex-wrap: wrap;
                                margin-left: -.5rem
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad {
                                background: #201c29;
                                border: 1px solid #312d3c;
                                -webkit-box-shadow: 0 4px 80px #000;
                                box-shadow: 0 4px 80px #000;
                                min-width: 33%;
                                max-width: 100%;
                                -webkit-box-flex: 1;
                                -ms-flex-positive: 1;
                                flex-grow: 1;
                                -ms-flex-preferred-size: calc(560px * 999 - 100% * 999);
                                flex-basis: calc(560px * 999 - 100% * 999);
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                margin: .5rem;
                                border-radius: 8px
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad a:focus .bsa_it_d,
                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad a:hover .bsa_it_d {
                                color: #a1a1af!important;
                                -webkit-text-fill-color: #a1a1af!important
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad>a:nth-of-type(1) {
                                -webkit-box-ordinal-group: 3;
                                -ms-flex-order: 2;
                                order: 2
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad>a:nth-of-type(2) {
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1;
                                padding-right: 1rem
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad>div:last-of-type {
                                display: none
                            }

                            .bsap-doubles.side-by-side .bsa_it .bsa_it_ad:last-of-type {
                                margin-right: 0
                            }

                            .bsa_it_p {
                                display: none!important
                            }

                            .bsa_it_ad {
                                padding: 1.3rem;
                                position: relative;
                                display: inline-block;
                                width: 100%;
                                margin: 0 0 1rem 0
                            }

                            .bsa_it_ad>a:hover .bsa_it_t {
                                color: #03a9f4
                            }

                            .bsa_it_t {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-weight: 700;
                                font-size: 1.2rem;
                                display: block;
                                margin: 0 0 5px 0
                            }

                            .bsa_it_i {
                                display: block;
                                float: none!important;
                                max-width: 100px
                            }

                            .bsa_it_i img {
                                border-radius: 4px;
                                display: block
                            }

                            .bsa_it_d {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                color: #a1a1af;
                                display: block;
                                font-size: .85rem
                            }

                            .bsap_1241308 a {
                                width: auto!important;
                                float: none!important
                            }

                            img[src*="doubleclick.net"] {
                                position: absolute!important;
                                top: -9999px;
                                left: -9999px
                            }

                            .bsa-content-ad,
                            .launchbit-ad-wrapper {
                                position: relative;
                                background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(0, 0, 0, .03) 8px, rgba(0, 0, 0, .03) 10px);
                                margin: 2rem 0;
                                padding: .5rem
                            }

                            .bsa-content-ad::before,
                            .launchbit-ad-wrapper::before {
                                text-transform: uppercase;
                                font-size: 10px;
                                position: absolute;
                                top: -5px;
                                right: 0;
                                content: "Sponsor";
                                color: #000
                            }

                            .bsa-content-ad .bsa_it_ad,
                            .launchbit-ad-wrapper .bsa_it_ad {
                                background: 0 0;
                                padding: 0;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                margin: 0
                            }

                            .bsa-content-ad .bsa_it_ad>*,
                            .launchbit-ad-wrapper .bsa_it_ad>* {
                                display: block
                            }

                            .bsa-content-ad .bsa_it_i,
                            .launchbit-ad-wrapper .bsa_it_i {
                                margin: 0!important
                            }

                            .bsa-content-ad .bsa_it_i img,
                            .launchbit-ad-wrapper .bsa_it_i img {
                                width: 60px;
                                height: 60px;
                                margin-right: 1rem;
                                display: block
                            }

                            .bsa-content-ad .bsa_it_t,
                            .launchbit-ad-wrapper .bsa_it_t {
                                color: #000;
                                font-size: 1rem;
                                display: inline-block;
                                margin: 0
                            }

                            .bsa-content-ad .bsa_it_d,
                            .launchbit-ad-wrapper .bsa_it_d {
                                display: inline-block
                            }

                            .bsa-content-ad .default-ad,
                            .launchbit-ad-wrapper .default-ad {
                                display: none
                            }

                            .bsa-content-ad .bsa_it iframe,
                            .launchbit-ad-wrapper .bsa_it iframe {
                                width: 100%
                            }

                            .bsa-content-ad ._default_,
                            .launchbit-ad-wrapper ._default_ {
                                overflow: hidden;
                                display: block
                            }

                            .bsa-content-ad ._default_ .default-image,
                            .launchbit-ad-wrapper ._default_ .default-image {
                                float: left
                            }

                            .bsa-content-ad ._default_ .default-image img,
                            .launchbit-ad-wrapper ._default_ .default-image img {
                                width: 60px;
                                height: 60px;
                                margin-right: 1rem
                            }

                            .bsa-content-ad ._default_ .default-title,
                            .launchbit-ad-wrapper ._default_ .default-title {
                                font-weight: 700;
                                color: #000;
                                margin-right: .5rem
                            }

                            .bsa-content-ad ._default_ .default-description,
                            .launchbit-ad-wrapper ._default_ .default-description {
                                color: #999;
                                font-size: .85rem
                            }

                            .bsa-content-ad ._default_:hover .default-title,
                            .launchbit-ad-wrapper ._default_:hover .default-title {
                                color: #03a9f4
                            }

                            .launchbit-ad a {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                font-size: .75rem
                            }

                            .launchbit-ad a .launchbit-img {
                                -ms-flex-item-align: center;
                                align-self: center;
                                max-width: 60px;
                                margin-right: 1rem;
                                display: block
                            }

                            .launchbit-ad a .launchbit-pixel {
                                width: 0;
                                height: 0
                            }

                            #all-ads {
                                height: 100%
                            }

                            #scroll-ad-position {
                                width: 1px;
                                height: 1px
                            }

                            #carbonads {
                                position: -webkit-sticky;
                                position: sticky;
                                top: calc(var(--nav-height) + 2.5rem);
                                background: #f5f5f5;
                                padding: 1rem;
                                font-size: .7rem;
                                border-radius: 8px;
                                opacity: 0;
                                visibility: hidden;
                                -webkit-transition: .3s;
                                transition: .3s
                            }

                            #carbonads .carbon-wrap {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: start;
                                -ms-flex-align: start;
                                align-items: flex-start
                            }

                            #carbonads img {
                                margin-right: 1rem;
                                width: 120px;
                                height: auto
                            }

                            #carbonads a {
                                color: #444
                            }

                            #carbonads .carbon-poweredby {
                                display: block;
                                background: #eee;
                                padding: .25rem;
                                text-align: center;
                                margin: .5rem 0 0 0;
                                font-size: .6rem
                            }

                            #carbonads.showing {
                                opacity: 1;
                                visibility: visible
                            }

                            .all-ads {
                                scrollbar-color: linear-gradient(to right, #da1b60, #ff8a00);
                                scrollbar-width: 4px;
                                padding: 1rem;
                                margin: 4rem 0;
                                overflow-x: auto;
                                width: 100%;
                                text-align: center;
                                white-space: nowrap
                            }

                            .all-ads::-webkit-scrollbar {
                                width: 4px;
                                height: 4px
                            }

                            .all-ads::-webkit-scrollbar-thumb {
                                background: -webkit-gradient(linear, left top, right top, from(#da1b60), to(#ff8a00));
                                background: linear-gradient(to right, #da1b60, #ff8a00);
                                border-radius: 4px;
                                -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                            }

                            .all-ads::-webkit-scrollbar-track {
                                background: linear-gradient(to right, #201c29, #201c29 1px, #17141d 1px, #17141d)
                            }

                            .all-ads>* {
                                display: inline-block;
                                vertical-align: top;
                                margin-right: 3rem
                            }

                            .all-ads #carbonads,
                            .all-ads #scroll-ad-position {
                                display: none
                            }

                            body.page-template-default {
                                background: #fff
                            }

                            body.page-template-default .article-content-meta {
                                display: none
                            }

                            .page-header {
                                padding: 2rem;
                                position: relative
                            }

                            @media (max-width:800px) {
                                .page-header {
                                    margin-bottom: 2rem;
                                    padding: 1rem
                                }
                            }

                            .page-header-top-nav {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-weight: 500;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                position: relative;
                                margin: 1rem 37.5vw 0 -1rem;
                                border: solid 4px transparent;
                                padding: 2rem;
                                height: 5rem;
                                width: 100%;
                                border-radius: 2.5rem 0 3.5rem 2.5rem;
                                background: -webkit-gradient(linear, left top, left bottom, from(#100e17), to(#100e17)) padding-box, -webkit-gradient(linear, left top, right top, from(#db1d60), to(#ed4f32)) 0/50% no-repeat border-box, -webkit-gradient(linear, right top, left top, from(#eb7d01), color-stop(37.5vw, #ed4f32), to(rgba(237, 79, 50, 0))) 100% 101%/65% 75% no-repeat border-box;
                                background: linear-gradient(#100e17, #100e17) padding-box, linear-gradient(90deg, #db1d60, #ed4f32) 0/50% no-repeat border-box, linear-gradient(-90deg, #eb7d01, #ed4f32 37.5vw, rgba(237, 79, 50, 0)) 100% 101%/65% 75% no-repeat border-box
                            }

                            .page-header-top-nav::after {
                                position: absolute;
                                left: 100%;
                                bottom: 3.5rem;
                                width: 37.5vw;
                                height: 3.5rem;
                                width: 37.5vw;
                                border: inherit;
                                border-color: #eb7d01;
                                border-width: 4px 0 0 4px;
                                border-radius: 3.5rem 0 0 0;
                                content: ""
                            }

                            .page-header-top-nav a {
                                white-space: nowrap;
                                padding: 0 1rem
                            }

                            body.page-template-page-almanac-group-php .page-header-top-nav a {
                                padding: 0 .55rem
                            }

                            @media (max-width:800px) {
                                .page-header-top-nav {
                                    padding: 0 1rem;
                                    margin: 0 -1rem;
                                    height: auto;
                                    background: 0 0;
                                    width: calc(100% + 2rem);
                                    border-left: 4px solid #da1b60;
                                    border-bottom: 4px solid #da1b60;
                                    border-right: 4px solid #da1b60;
                                    border-radius: 100px
                                }
                                .page-header-top-nav::after {
                                    display: none
                                }
                            }

                            .page-header-top-nav-inside {
                                scrollbar-color: #312d3c;
                                scrollbar-width: 8px;
                                overflow: auto;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                padding: .5rem 0
                            }

                            .page-header-top-nav-inside::-webkit-scrollbar {
                                width: 8px;
                                height: 8px
                            }

                            .page-header-top-nav-inside::-webkit-scrollbar-thumb {
                                background: #312d3c;
                                border-radius: 8px;
                                -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25);
                                box-shadow: inset 2px 2px 2px rgba(255, 255, 255, .25), inset -2px -2px 2px rgba(0, 0, 0, .25)
                            }

                            .page-header-top-nav-inside::-webkit-scrollbar-track {
                                background: linear-gradient(to right, #201c29, #201c29 1px, transparent 1px, transparent)
                            }

                            .blob-top-right {
                                position: absolute;
                                top: -95px;
                                right: -20px;
                                width: 500px;
                                height: 332px;
                                z-index: -1;
                                -webkit-filter: saturate(125%);
                                filter: saturate(125%)
                            }

                            @media (max-width:1200px) {
                                .blob-top-right {
                                    display: none
                                }
                            }

                            .blob-circle {
                                position: absolute;
                                z-index: -2;
                                top: 150px;
                                left: -125px;
                                width: 250px;
                                height: 250px;
                                -webkit-filter: saturate(125%);
                                filter: saturate(125%)
                            }

                            @media (max-width:1433px) {
                                .blob-circle {
                                    display: none
                                }
                            }

                            .blob-circle-small {
                                position: absolute;
                                top: -20px;
                                right: 378px;
                                width: 120px;
                                height: 120px;
                                fill: #201c29;
                                z-index: -3;
                                -webkit-filter: saturate(125%);
                                filter: saturate(125%)
                            }

                            @media (max-width:1200px) {
                                .blob-circle-small {
                                    display: none
                                }
                            }

                            .header-line-only {
                                position: absolute;
                                z-index: -4;
                                bottom: -3px;
                                width: 70vw;
                                fill: none;
                                stroke: url(#orange-to-pink);
                                stroke-width: 4px;
                                overflow: visible;
                                stroke-linecap: round
                            }

                            .header-line-only path {
                                vector-effect: non-scaling-stroke
                            }

                            @media (max-width:1200px) {
                                .header-line-only {
                                    width: 88vw
                                }
                            }

                            .article-categories {
                                margin-right: 2rem
                            }

                            .article-categories a {
                                color: #03a9f4;
                                display: inline-block;
                                margin: 0 .25rem
                            }

                            body.page-id-21356 {
                                background-image: radial-gradient(ellipse closest-side, rgba(15, 14, 22, .5), #100e17), url(https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1545953993/haha-business_irjvt0.jpg);
                                background-repeat: no-repeat;
                                background-position: top right;
                                background-size: 800px
                            }

                            body.page-id-21356 .css-tricks-license {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace
                            }

                            body.page-id-199454 {
                                background-image: radial-gradient(ellipse closest-side, rgba(15, 14, 22, .5), #100e17), url(https://res.cloudinary.com/css-tricks/image/upload/f_auto,q_auto/v1546722053/about-star_xzlvtc.png);
                                background-repeat: no-repeat;
                                background-position: top right;
                                background-size: 1400px
                            }

                            body.page-id-199454 .css-tricks-license {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace
                            }

                            .page-wrap-home {
                                max-width: 1284px;
                                margin: 0 auto
                            }

                            .hero-article {
                                position: relative;
                                display: grid;
                                grid-template-columns: 1fr 300px;
                                grid-gap: 4rem;
                                font-size: 20px;
                                margin-bottom: 4rem;
                                padding-top: 1rem;
                                overflow: hidden
                            }

                            @media (max-width:1085px) {
                                .hero-article {
                                    display: block
                                }
                            }

                            .hero-article .article-content-meta .author-avatar,
                            .hero-article .article-publication-meta .author-avatar {
                                grid-area: auto
                            }

                            @media (max-width:1200px) {
                                .hero-article {
                                    font-size: 18px
                                }
                            }

                            @media (max-width:800px) {
                                .hero-article {
                                    font-size: 16px
                                }
                            }

                            .hero-article-article {
                                position: relative
                            }

                            .hero-article-ad {
                                margin: 0;
                                position: relative;
                                z-index: 2;
                                -ms-flex-item-align: end;
                                align-self: end
                            }

                            @media (max-width:1085px) {
                                .hero-article-ad {
                                    display: none
                                }
                            }

                            .hero-article-ad .single-ad {
                                margin: 0;
                                -webkit-transform: translateX(-1rem);
                                transform: translateX(-1rem)
                            }

                            .jobs-main-wrap {
                                padding-bottom: 5rem
                            }

                            .job {
                                position: relative;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                padding: 2rem 0;
                                border-bottom: 1px solid #312d3c
                            }

                            .job>* {
                                padding-right: 2rem
                            }

                            .job>:last-child {
                                padding-right: 0
                            }

                            @media (max-width:800px) {
                                .job {
                                    display: block;
                                    padding-left: 0;
                                    padding-right: 0
                                }
                                .job .job-type {
                                    float: left;
                                    margin-bottom: 1rem
                                }
                                .job .job-link {
                                    clear: both
                                }
                                .job .job-title {
                                    margin-bottom: 1rem
                                }
                            }

                            .job-title-and-company {
                                margin: 0;
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 50%;
                                flex: 0 0 50%
                            }

                            .job-title-and-company a:focus,
                            .job-title-and-company a:hover {
                                -webkit-text-fill-color: #fff!important
                            }

                            .job-company {
                                font-size: 20px
                            }

                            .job-title {
                                font-size: 20px;
                                font-weight: 400;
                                line-height: 1.5;
                                color: #a4a4a4
                            }

                            .job-featured-text {
                                font-weight: 700;
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone
                            }

                            .job-link {
                                margin-left: auto
                            }

                            .job-location,
                            .job-type {
                                color: #7a7a8c;
                                font-weight: 700;
                                font-size: 16px
                            }

                            .job-address,
                            .job-term {
                                white-space: nowrap;
                                color: #fff;
                                font-weight: 400
                            }

                            .post-a-job {
                                margin: 100px auto 50px;
                                text-align: center;
                                max-width: 400px
                            }

                            .video-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
                                grid-gap: 5rem
                            }

                            .video-grid .bsap-doubles {
                                grid-column: span 2;
                                -ms-flex-item-align: self-start;
                                align-self: self-start
                            }

                            .video-grid .bsap-doubles>div {
                                height: 100%
                            }

                            .video-grid .bsap-doubles>div>.bsa_it {
                                height: 100%
                            }

                            @media (max-width:800px) {
                                .video-grid {
                                    display: block
                                }
                            }

                            .video-module {
                                font-size: .9rem
                            }

                            .video-module h2 {
                                margin: 0
                            }

                            .video-module h2 a {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column
                            }

                            @media (max-width:800px) {
                                .video-module {
                                    margin-bottom: 3rem
                                }
                            }

                            .video-number {
                                color: #7a7a8c;
                                display: inline
                            }

                            .video-thumb {
                                background-image: -webkit-gradient(linear, left top, right bottom, from(#ff8a00), to(#da1b60));
                                background-image: linear-gradient(to bottom right, #ff8a00, #da1b60);
                                -webkit-box-ordinal-group: 0;
                                -ms-flex-order: -1;
                                order: -1;
                                -webkit-transition: .2s;
                                transition: .2s;
                                border-radius: 16px;
                                margin: 0 0 1rem 0;
                                width: 75%
                            }

                            .video-thumb img.video-thumbnail {
                                width: 100%;
                                display: block;
                                border-radius: 8px;
                                opacity: 1;
                                -webkit-filter: grayscale(100%);
                                filter: grayscale(100%);
                                -webkit-transition: .1s;
                                transition: .1s
                            }

                            body.page-template-page-lodge-group-php .video-thumb {
                                display: none
                            }

                            .watch-video-link {
                                display: block;
                                padding: .5rem 0
                            }

                            .watch-video-button {
                                padding: 1rem 0;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                font-size: 16px;
                                font-weight: 400
                            }

                            .watch-video-button svg {
                                fill: #fff;
                                margin-right: .5rem
                            }

                            .watch-video-button strong {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                display: block;
                                margin: 0 0 .25rem 0
                            }

                            .watch-video-button span {
                                color: #fff
                            }

                            .video-info {
                                position: relative
                            }

                            .video-info h2 a:focus strong,
                            .video-info h2 a:focus time,
                            .video-info h2 a:hover strong,
                            .video-info h2 a:hover time {
                                color: #fff;
                                -webkit-text-fill-color: #fff
                            }

                            .video-info h2 a:focus .video-thumb .video-thumbnail,
                            .video-info h2 a:hover .video-thumb .video-thumbnail {
                                opacity: .33
                            }

                            .video-info h2 a:focus span,
                            .video-info h2 a:hover span {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone
                            }

                            .video-description {
                                color: #c2c2c2
                            }

                            .lodge-video-nav {
                                overflow: hidden;
                                margin: 0 0 10px 0;
                                border-bottom: 1px solid #ccc;
                                padding: .5rem;
                                margin: 0 0 20px 0
                            }

                            .lodge-video-prev {
                                float: left
                            }

                            .lodge-video-next {
                                float: right
                            }

                            .single-video-wrapper {
                                border-radius: 16px;
                                overflow: hidden
                            }

                            .lodge-course-time {
                                color: #fff;
                                margin-left: .25rem
                            }

                            .almanac-headers {
                                display: grid;
                                grid-template-columns: 1fr 1fr
                            }

                            .almanac-headers>div {
                                padding: 0 2rem 2rem 0;
                                color: #7a7a8c
                            }

                            .almanac-headers>div h2 {
                                color: #fff;
                                margin: 0 0 .5rem 0
                            }

                            .almanac-letter-row {
                                display: grid;
                                grid-template-columns: 75px 1fr calc(75px + 2rem) 1fr;
                                border-top: 1px solid #201c29
                            }

                            @media (max-width:800px) {
                                .almanac-letter-row {
                                    grid-template-columns: 30px 1fr calc(30px + 1rem) 1fr
                                }
                            }

                            .property-letter {
                                padding-left: 2rem
                            }

                            @media (max-width:800px) {
                                .property-letter {
                                    padding-left: 1rem
                                }
                            }

                            .property-list,
                            .selector-list {
                                padding: 100px 0 2rem 0
                            }

                            .property-list>ol>li>a,
                            .selector-list>ol>li>a {
                                display: block;
                                padding: .5rem 0;
                                border-bottom: 1px solid #201c29;
                                color: #c2c2c2
                            }

                            .property-list>ol>li>a:focus,
                            .property-list>ol>li>a:hover,
                            .selector-list>ol>li>a:focus,
                            .selector-list>ol>li>a:hover {
                                border-bottom-color: #ff8a00
                            }

                            .selector-list {
                                border-right: 1px solid #201c29;
                                padding-right: 2rem
                            }

                            @media (max-width:800px) {
                                .selector-list {
                                    padding-right: 1rem
                                }
                            }

                            .property-letter,
                            .selector-letter {
                                padding-top: 100px;
                                font-weight: 700;
                                font-size: 32px
                            }

                            @media (max-width:800px) {
                                .property-letter,
                                .selector-letter {
                                    font-size: 26px
                                }
                            }

                            .caniuse {
                                font-size: .8rem;
                                background: #fffaf2;
                                padding: 1.5rem;
                                margin: 0 0 1rem 0;
                                border-radius: 8px
                            }

                            .caniuse .caniuse-section:last-child {
                                margin-top: 1rem
                            }

                            .caniuse h4 {
                                font-size: 1.1rem;
                                padding-top: 0;
                                margin: 2rem 0 0 0
                            }

                            .browser-support-table {
                                border-collapse: separate!important;
                                border-spacing: .25rem!important
                            }

                            .browser-support-table tr {
                                background: 0 0!important
                            }

                            .browser-support-table th {
                                background: 0 0!important;
                                color: #201c29!important;
                                border: 0!important;
                                position: relative;
                                line-height: 1.1;
                                vertical-align: top
                            }

                            .browser-support-table th::before {
                                content: "";
                                display: block;
                                margin: 0 auto .5rem;
                                width: 32px;
                                height: 32px;
                                background-size: contain
                            }

                            .browser-support-table th.chrome::before {
                                background-image: url(images/browser-logos/chrome_64x64.png)
                            }

                            .browser-support-table th.opera::before {
                                background-image: url(images/browser-logos/opera_15-32_64x64.png)
                            }

                            .browser-support-table th.firefox::before {
                                background-image: url(images/browser-logos/firefox_64x64.png)
                            }

                            .browser-support-table th.ie::before {
                                background-image: url(images/browser-logos/internet-explorer_9-11_64x64.png)
                            }

                            .browser-support-table th.edge::before {
                                background-image: url(images/browser-logos/edge_64x64.png)
                            }

                            .browser-support-table th.safari::before {
                                background-image: url(images/browser-logos/safari_64x64.png)
                            }

                            .browser-support-table th.iOS::before,
                            .browser-support-table th.ios::before,
                            .browser-support-table th.ios_saf::before {
                                background-image: url(images/browser-logos/safari-ios_64x64.png)
                            }

                            .browser-support-table th.op_mini::before,
                            .browser-support-table th.op_mob::before {
                                background-image: url(images/browser-logos/opera_15-32_64x64.png)
                            }

                            .browser-support-table th.android::before {
                                background-image: url(images/browser-logos/android-webview-beta_64x64.png)
                            }

                            .browser-support-table th.and_chr::before {
                                background-image: url(images/browser-logos/chrome_64x64.png)
                            }

                            .browser-support-table th.and_ff::before {
                                background-image: url(images/browser-logos/firefox_64x64.png)
                            }

                            .browser-support-table td,
                            .browser-support-table th {
                                text-align: center!important;
                                padding: .5rem!important;
                                border-top: 0!important;
                                font-weight: 700;
                                border-radius: 4px
                            }

                            .browser-support-table .yep {
                                background: #47ca4c;
                                color: #fff
                            }

                            .browser-support-table .nope {
                                background: #ff0024;
                                color: #fff
                            }

                            .browser-support-table .yep-nope {
                                background: #ffa100;
                                color: #fff
                            }

                            @media (max-width:1200px) {
                                .browser-support-table,
                                .browser-support-table tbody,
                                .browser-support-table th,
                                .browser-support-table tr {
                                    display: block
                                }
                                .browser-support-table thead {
                                    display: none
                                }
                                .browser-support-table tr {
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -ms-flex-wrap: wrap;
                                    flex-wrap: wrap
                                }
                                .browser-support-table td {
                                    border-radius: 4px;
                                    border: 0!important;
                                    margin: 0 5px 5px 0
                                }
                                .browser-support-table td::before {
                                    color: #222;
                                    content: attr(data-browser-name) ": "
                                }
                            }

                            .almanac-nav {
                                margin: 0
                            }

                            .almanac-nav>li {
                                font-size: 3em;
                                margin: 0 0 20px 0
                            }

                            .almanac-nav>li li {
                                font-size: .4em
                            }

                            .almanac-nav>li small {
                                border: 1px solid #ccc;
                                color: #ccc;
                                display: inline-block;
                                font-size: 25%;
                                margin-left: 15px;
                                padding: 1px 5px;
                                position: relative;
                                bottom: 15px
                            }

                            .single-almanac-content {
                                background: #fff
                            }

                            .top-nav-archives {
                                white-space: nowrap;
                                position: relative;
                                overflow: visible;
                                width: 100%
                            }

                            .top-nav-archives .select-navigator {
                                width: 384px;
                                margin-right: auto
                            }

                            .number-of-articles {
                                color: #b1b1b1;
                                margin-right: 1rem;
                                margin-left: 1rem;
                                font-size: 16px
                            }

                            @media (max-width:800px) {
                                .number-of-articles {
                                    display: none
                                }
                            }

                            .sorting-button {
                                color: #b1b1b1;
                                font-size: 16px;
                                line-height: 1.6;
                                border-left: 1px solid #312d3c;
                                padding-left: 1rem
                            }

                            @media (max-width:800px) {
                                .sorting-button {
                                    margin-left: 1rem
                                }
                            }

                            .down-arrow {
                                display: inline-block;
                                -webkit-transform: rotate(90deg);
                                transform: rotate(90deg)
                            }

                            .down-arrow svg {
                                width: 20px;
                                height: 20px
                            }

                            .sorting-controls {
                                font-family: "Operator Mono SSm A", "Operator Mono SSm B", "Operator Mono", "Source Code Pro", Menlo, Consolas, Monaco, monospace;
                                position: absolute;
                                z-index: 5;
                                right: 0;
                                top: 80%;
                                -webkit-box-shadow: 0 4px 80px #000;
                                box-shadow: 0 4px 80px #000;
                                max-width: 395px;
                                white-space: normal;
                                text-align: left;
                                padding: 0 1rem;
                                border-radius: 4px;
                                background: #201c29;
                                max-height: 0;
                                overflow: hidden;
                                -webkit-transition: .2s;
                                transition: .2s;
                                margin: 1rem 0 0 0
                            }

                            .sorting-controls.open {
                                max-height: 400px;
                                padding-top: 1rem;
                                padding-bottom: 1rem
                            }

                            .sorting-controls .custom-select {
                                display: inline-block;
                                width: 100px;
                                border: 2px solid #312d3c;
                                margin-bottom: 10px
                            }

                            @media (max-width:800px) {
                                .sorting-controls {
                                    font-size: .66rem
                                }
                            }

                            body.single-guides .header-line-only {
                                z-index: 2;
                                bottom: 6px
                            }

                            body.post-type-archive-guides .read-more {
                                display: none
                            }

                            body.post-type-archive-guides .page-wrap-max-width {
                                padding-top: 3rem
                            }

                            .guide-card {
                                display: grid;
                                grid-template-columns: 1fr 2fr;
                                grid-gap: 2rem;
                                margin: 0 0 5rem 0
                            }

                            .guide-card .article-publication-meta {
                                color: #7a7a8c;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex
                            }

                            .guide-card .article-publication-meta .created {
                                margin-right: 1rem
                            }

                            .guide-card .article-publication-meta .number-of-resources {
                                margin-left: .3rem;
                                color: #b1b1b1
                            }

                            @media (max-width:800px) {
                                .guide-card {
                                    grid-gap: 1rem
                                }
                            }

                            .guide-card-img {
                                width: 100%;
                                background: #a4a4a4;
                                border-radius: 8px
                            }

                            .guide-wrap {
                                padding: 4rem 0;
                                background: #100e17
                            }

                            @media (max-width:1200px) {
                                .guide-wrap {
                                    padding: 6rem 0
                                }
                            }

                            body.post-template-guide-special .guide-wrap {
                                max-width: 866px;
                                margin: 0
                            }

                            .guide-wrap-special {
                                background: #fff;
                                line-height: 1.6;
                                overflow-wrap: break-word
                            }

                            .guide-wrap-special li,
                            .guide-wrap-special p {
                                max-width: 800px
                            }

                            .article-grid {
                                display: grid;
                                grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
                                grid-gap: 6rem 4rem
                            }

                            .article-grid .article-card {
                                margin-bottom: 0
                            }

                            @media (max-width:800px) {
                                .article-grid {
                                    display: block
                                }
                                .article-grid .article-card {
                                    margin-bottom: 6rem
                                }
                            }

                            .snippet-top-level-nav {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex
                            }

                            .snippet-top-level-nav li.active {
                                border-bottom: 3px solid #da1b60
                            }

                            .list-of-snippets>li {
                                display: grid;
                                grid-template-columns: 50% 1fr 1fr 1fr;
                                border-bottom: 1px solid #312d3c;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                padding: .75rem 0
                            }

                            @media (max-width:800px) {
                                .list-of-snippets>li {
                                    padding: 1rem 0;
                                    grid-template-columns: 1fr 1fr 1fr
                                }
                                .list-of-snippets>li .snippet-title {
                                    grid-column: 1/4;
                                    margin: 0 0 .5rem 0
                                }
                            }

                            .list-of-snippets.limit-shown>li:nth-child(n+50) {
                                display: none
                            }

                            .snippet-title {
                                font-family: Rubik, Lato, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
                                font-weight: 700;
                                font-size: 20px;
                                padding-right: 20px
                            }

                            .snippet-author,
                            .snippet-category,
                            .snippet-updated {
                                color: #7a7a8c;
                                font-size: 16px
                            }

                            .snippet-author a,
                            .snippet-author time,
                            .snippet-category a,
                            .snippet-category time,
                            .snippet-updated a,
                            .snippet-updated time {
                                color: #fff
                            }

                            .single-snippet-content {
                                background: #fff
                            }

                            body.search-results .page-header-top-nav-inside {
                                width: 100%
                            }

                            body.search-results .page-header-top-nav-inside .search-form {
                                -webkit-box-flex: 1;
                                -ms-flex: 1;
                                flex: 1
                            }

                            body.search-results .site-header .search,
                            body.search-results .site-header .search-opener {
                                display: none
                            }

                            .search-grid {
                                display: grid;
                                grid-template-columns: minmax(0, 1fr) 300px;
                                grid-gap: 2rem;
                                padding: 2rem 0
                            }

                            @media (max-width:800px) {
                                .search-grid {
                                    display: block
                                }
                            }

                            .two-line-excerpt {
                                color: #c2c2c2
                            }

                            .two-line-excerpt>* {
                                display: none
                            }

                            .two-line-excerpt p:first-of-type {
                                display: block;
                                display: -webkit-box;
                                -webkit-line-clamp: 2;
                                -webkit-box-orient: vertical;
                                overflow: hidden;
                                margin: 0
                            }

                            .search-grid-list ol li {
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: start;
                                -ms-flex-align: start;
                                align-items: flex-start;
                                margin: 0 0 4rem 0
                            }

                            .search-grid-list ol li .the-post-thumbnail {
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 200px;
                                flex: 0 0 200px;
                                margin-right: 2rem
                            }

                            .search-grid-list ol li .the-post-thumbnail img {
                                border-radius: 8px
                            }

                            .search-grid-list ol li .the-post-thumbnail-placeholder {
                                border: 4px solid #312d3c;
                                border-radius: 8px;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                -webkit-box-pack: center;
                                -ms-flex-pack: center;
                                justify-content: center;
                                -ms-flex-item-align: stretch;
                                align-self: stretch
                            }

                            .search-grid-list ol li .the-post-thumbnail-placeholder svg {
                                width: 40px;
                                height: 40px
                            }

                            .search-grid-list ol li .the-post-thumbnail-placeholder svg:not(.icon-link) {
                                stroke: #fff;
                                fill: none;
                                stroke-width: 2;
                                stroke: #c2c2c2
                            }

                            .search-grid-list ol li .icon-link {
                                fill: #cfcfcf;
                                width: 18px;
                                margin: 0
                            }

                            .search-grid-list ol li h2 {
                                font-size: 1.4rem;
                                margin: 0 0 .5rem 0
                            }

                            @media (max-width:1200px) {
                                .search-grid-list ol li .the-post-thumbnail {
                                    display: none
                                }
                            }

                            .search-result-header {
                                margin: 0 0 .25rem 0;
                                font-size: .9rem
                            }

                            .jetpack-search-form .search-form {
                                width: auto;
                                padding: 0
                            }

                            .csw-widget {
                                color: #fff
                            }

                            body.page-template-page-newsletters-php .footer-newsletter #footer-form-wrap,
                            body.page-template-page-newsletters-php .footer-newsletter h2,
                            body.page-template-page-newsletters-php .footer-newsletter p {
                                display: none
                            }

                            .newsletters-wrap {
                                position: relative;
                                display: grid;
                                grid-template-columns: minmax(0, 1fr) 400px;
                                padding: 2rem;
                                grid-gap: 8rem
                            }

                            @media (max-width:880px) {
                                .newsletters-wrap {
                                    display: block
                                }
                            }

                            @media (max-width:800px) {
                                .newsletters-wrap {
                                    padding-left: 1rem;
                                    padding-right: 1rem
                                }
                            }

                            .newsletters-wrap-left {
                                margin-bottom: 4rem
                            }

                            .newsletters-wrap-left p {
                                color: #c2c2c2
                            }

                            .newsletters-wrap-left svg {
                                width: 40px;
                                height: 40px;
                                stroke: #fff;
                                stroke-width: 2;
                                stroke-linecap: round;
                                stroke-linejoin: round;
                                margin-right: .3rem
                            }

                            .newsletters-wrap-left svg path:nth-child(3) {
                                stroke: url(#orange-to-pink)
                            }

                            .newsletters-wrap-left h3 {
                                margin-top: 2rem
                            }

                            .newsletters-nav {
                                margin-bottom: 1rem;
                                display: -webkit-box;
                                display: -ms-flexbox;
                                display: flex;
                                -webkit-box-align: center;
                                -ms-flex-align: center;
                                align-items: center;
                                white-space: nowrap
                            }

                            .newsletters-nav .custom-select {
                                margin-left: .5rem
                            }

                            .fake-phone {
                                padding: 2.5rem 1rem;
                                margin: 0 auto;
                                background: #312d3c;
                                border: 1px solid #7a7a8c;
                                border-radius: 2rem
                            }

                            @media (max-width:800px) {
                                .fake-phone {
                                    width: 100%;
                                    padding: 0
                                }
                            }

                            .fake-phone-iframe-wrap {
                                height: 600px;
                                overflow-y: auto
                            }

                            body.ios .fake-phone-iframe-wrap {
                                overflow-y: scroll;
                                -webkit-overflow-scrolling: touch
                            }

                            .newsletter-iframe {
                                height: 100%;
                                width: 100%;
                                border: 0
                            }

                            .newsletter-iframe-wrap {
                                height: 800px
                            }

                            .single-newsletter {
                                max-width: 600px;
                                margin: 0 auto;
                                padding: 20px
                            }

                            .single-newsletter,
                            .single-newsletter blockquote {
                                font-size: 14px
                            }

                            .header-breadcrumbs .single-newsletter .breadcrumb_last,
                            .single-newsletter .header-breadcrumbs .breadcrumb_last,
                            .single-newsletter h1,
                            .single-newsletter h2,
                            .single-newsletter h3,
                            .single-newsletter h4,
                            .single-newsletter h5,
                            .single-newsletter h6 {
                                padding: 0
                            }

                            .header-breadcrumbs .single-newsletter .breadcrumb_last,
                            .single-newsletter .header-breadcrumbs .breadcrumb_last,
                            .single-newsletter h1 {
                                border-bottom: 4px solid #ff8a00;
                                font-size: 24px;
                                padding-bottom: 10px
                            }

                            .single-newsletter h2 {
                                font-size: 20px
                            }

                            .people-table {
                                display: grid;
                                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                                grid-gap: 4rem;
                                margin: 0 0 4rem 0
                            }

                            .css-tricks-person {
                                overflow: hidden
                            }

                            .css-tricks-person h4 {
                                font-weight: 700;
                                padding: 0;
                                margin: 0 0 .25rem
                            }

                            .css-tricks-person .author-avatar {
                                margin: 0 0 1rem 0
                            }

                            .css-tricks-person .author-avatar .avatar {
                                width: 130px;
                                -webkit-transform: translate(17px, 2px);
                                transform: translate(17px, 2px)
                            }

                            .css-tricks-person .author-avatar .half-circle {
                                width: 185px;
                                height: 99px;
                                bottom: -10px
                            }

                            .css-tricks-person .links {
                                margin: 0 0 1rem 0
                            }

                            .css-tricks-person .links svg {
                                width: 28px;
                                height: 28px
                            }

                            .css-tricks-person .links .icon-globe {
                                stroke: #b1b1b1;
                                stroke-width: 2
                            }

                            .css-tricks-person .links .logo-twitter {
                                fill: #b1b1b1;
                                margin-right: .3rem
                            }

                            .css-tricks-person .links a:focus .logo-twitter,
                            .css-tricks-person .links a:hover .logo-twitter {
                                fill: url(#orange-to-pink)
                            }

                            .css-tricks-person .links a:focus svg,
                            .css-tricks-person .links a:hover svg {
                                stroke: url(#orange-to-pink)
                            }

                            .css-tricks-person .person-bio {
                                font-size: .9rem;
                                line-height: 1.4;
                                color: #a4a4a4;
                                padding-bottom: .5rem;
                                border-bottom: 1px solid #201c29
                            }

                            .css-tricks-person .total-articles {
                                background: -webkit-gradient(linear, left top, right top, from(#ff8a00), to(#da1b60));
                                background: linear-gradient(to right, #ff8a00, #da1b60);
                                -webkit-background-clip: text;
                                -webkit-text-fill-color: transparent;
                                -webkit-box-decoration-break: clone;
                                box-decoration-break: clone;
                                font-weight: 700
                            }

                            body.bbpress #bbpress-forums div.bbp-reply-content a,
                            body.bbpress #bbpress-forums div.bbp-topic-content a {
                                background: inherit
                            }

                            body.bbpress .article-and-sidebar {
                                padding: 0
                            }

                            #bbpress-forums,
                            #bbpress-forums ul.bbp-forums,
                            #bbpress-forums ul.bbp-lead-topic,
                            #bbpress-forums ul.bbp-replies,
                            #bbpress-forums ul.bbp-search-results,
                            #bbpress-forums ul.bbp-topics {
                                font-size: 16px!important;
                                line-height: 1.4!important
                            }

                            #bbpress-forums div.bbp-reply-content code,
                            #bbpress-forums div.bbp-reply-content pre,
                            #bbpress-forums div.bbp-topic-content code,
                            #bbpress-forums div.bbp-topic-content pre {
                                background: #201c29!important;
                                color: #fff!important;
                                border: 0
                            }

                            body.bbpress #bbpress-forums div.bbp-reply-content a,
                            body.bbpress #bbpress-forums div.bbp-topic-content a {
                                background: 0 0;
                                -webkit-text-fill-color: #03a9f4
                            }

                            body.bbpress .bbp-search-form {
                                margin: 0 0 14px 0
                            }

                            body.bbpress .bbp-search-form input[type=email],
                            body.bbpress .bbp-search-form input[type=password],
                            body.bbpress .bbp-search-form input[type=search],
                            body.bbpress .bbp-search-form input[type=text],
                            body.bbpress .bbp-search-form input[type=url],
                            body.bbpress .bbp-search-form textarea,
                            body.bbpress .forums-login-form input[type=email],
                            body.bbpress .forums-login-form input[type=password],
                            body.bbpress .forums-login-form input[type=search],
                            body.bbpress .forums-login-form input[type=text],
                            body.bbpress .forums-login-form input[type=url],
                            body.bbpress .forums-login-form textarea {
                                font-family: inherit;
                                outline: 0;
                                border: 1px solid #a4a4a4;
                                padding: 5px 1rem;
                                border-radius: 8px;
                                display: block;
                                width: 100%;
                                margin: 0 0 8px 0
                            }

                            body.bbpress .button,
                            body.bbpress .commentPreviewButton {
                                padding-top: 5px;
                                padding-bottom: 5px
                            }

                            #bbpress-forums div.bbp-the-content-wrapper textarea.bbp-the-content {
                                border: 1px solid #939393
                            }

                            @media screen and (max-width:400px) {
                                @-ms-viewport {
                                    width: 320px
                                }
                            }

                            @media print {
                                #respond,
                                .button,
                                .comment-reply-link,
                                .commentPreviewButton,
                                .cp_embed_wrapper>iframe,
                                .google-ad,
                                .header-gradient-after,
                                .mega-header::before,
                                .related-ads-comments-wrap,
                                .related-posts,
                                .search,
                                .sharedaddy,
                                .site-header,
                                .tags,
                                .view-comments-button,
                                .win-size-grip,
                                [class*=bsa],
                                aside,
                                footer,
                                header.top,
                                nav,
                                svg {
                                    display: none!important
                                }
                                .cp_embed_wrapper {
                                    height: auto!important
                                }
                                .cp_embed_wrapper::before {
                                    content: "Embedded Pen Here";
                                    border: 1px solid #ccc;
                                    margin: 2rem 0;
                                    display: block;
                                    padding: 2rem;
                                    text-align: center
                                }
                                #respond {
                                    page-break-before: always
                                }
                                body {
                                    background: 0 0
                                }
                                .article-and-sidebar {
                                    display: block;
                                    width: 100%;
                                    padding: 0;
                                    max-width: 100%
                                }
                                .header-breadcrumbs,
                                a,
                                code,
                                code span,
                                html,
                                pre,
                                pre::before,
                                time {
                                    background: 0 0!important;
                                    color: #000!important
                                }
                                pre {
                                    border-top: 1px solid #000;
                                    border-bottom: 1px solid #000
                                }
                                .article-content a::after {
                                    content: " (" attr(href) ") "
                                }
                            }