/*
Theme Name: FWPv4
Theme URI: https://facetwp.com
Author: FacetWP, LLC
Version: 4.3
*/


/*==================================================
    Fonts
==================================================*/
/* source-sans-pro-regular - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('assets/fonts/source-sans-pro-v18-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('assets/fonts/source-sans-pro-v18-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-italic - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    src: local(''),
    url('assets/fonts/source-sans-pro-v18-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('assets/fonts/source-sans-pro-v18-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-600 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('assets/fonts/source-sans-pro-v18-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('assets/fonts/source-sans-pro-v18-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* source-sans-pro-700 - latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('assets/fonts/source-sans-pro-v18-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('assets/fonts/source-sans-pro-v18-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* lato-700 - latin */
@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('assets/fonts/lato-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('assets/fonts/lato-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@font-face {
    font-family: 'icomoon';
    src: url('assets/fonts/icomoon.eot?220725-01');
    src: url('assets/fonts/icomoon.eot?220725-01#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.ttf?220725-01') format('truetype'),
    url('assets/fonts/icomoon.woff?220725-01') format('woff'),
    url('assets/fonts/icomoon.svg?220725-01#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}


/*==================================================
    Colors
==================================================*/
:root {
    --text: #363636;
    --text-light: #aaaaaa;
    --text-verylight: #eeeeee;
    --text-link: #6233ca;
    --text-link-opacity: 98, 51, 202;
    --text-link-hover: #cc52ab;
    --text-link-hover-opacity: 204, 82, 171;
    --text-link-current: #d93f7c;
    --text-red-soft: #e5424c;
    --text-medium: #888;
    --text-purple-gray-ultra-ultra-light: #dddbe3;
    --text-purple-gray-ultra-light: #c1bdcc;
    --text-purple-gray-light: #aaa1c3;
    --text-purple-gray-medium: #9991b0;
    --text-purple-gray-medium-dark: #786e94;
    --text-purple-gray-dark: #6d677f;
    --text-purple-gray-dark-opacity: 109, 103, 127;
    --text-violet-light: #e8a7ec;
    --text-link-codeinfoblock: #96d0ff;
    --text-link-codeinfoblock-hover: #dcbdfb;

    --white: #ffffff;
    --bg-gray-ultra-ultra-light: #faf9fb;
    --bg-gray-ultra-light: #f3f2f5;
    --bg-gray-light: #f6f5f8;
    --bg-gray-medium: #efeff4;
    --border-gray: #e7e4ed;
    --border-gray-medium: #dad7e4; /*input borders*/
    --bg-violet-light: #fbf2f8;
    --bg-violet-medium: #bb4498;
    --bg-violet-dark: #8c34a2;
    --bg-violet-red: #d82f5b;
    --bg-purple-medium: #7957d5;
    --bg-purple-dark: #4c22ad;
    --bg-purple-ultra-dark: #201346;

    --bg-violet: #c975ba; /*built-in facets*/
    --bg-blue-soft: #4f9fdd; /*add-on facets*/
    --bg-blue-soft-opacity: 79, 159, 221;
    --bg-orange: #f49530; /*add-on features*/
    --bg-orange-opacity :244, 149, 48;
    --bg-mint-green: #4bc1a1; /*add-on integrations*/
    --bg-mint-green-opacity: 75, 193, 161;
    --bg-red-soft: #e65761; /*add-on tools*/
    --bg-red-soft-opacity: 230, 87, 97;
    --bg-red-bright: #f64d58;
    --bg-orange-dark: #f56640; /*buy*/
    --bg-orange-red: #eb5f3c; /*buy*/
    --bg-orange-light: #ffdfca; /*buy*/
    --bg-green: #42b845;
    --highlight: #ffeb3b55;
    --bg-code-infoblock: #505763;
    --border-code-infoblock: #6D7788;

    /*footer*/
    --text-purple-medium: #9084b5;
    --text-purple-medium-light: #978db3;

    /* changelog */
    --bg-green-dark: #059669;
    --bg-yellow-dark: #f59e0b;
    --bg-blue-hard: #2563eb;
    --bg-red-hard: #dc2626;

    /* code block */
    --text-light-code: #adbac7;
    --bg-code: #222831;
    --bg-code-badge: #383e46;
    --bg-code-badge-active: #41474f;
    --bg-code-badge-lang: #a38026;
    --bg-code-badge-lang-active: #daa520;
    --bg-code-line-numbers: #617084;
    --bg-code-lines-active: 229, 208, 122;

    /* banners */
    --banner-note: 232, 203, 74;
    --banner-info: 64, 208, 122;
    --banner-warning: 245, 102, 64;
    --banner-deprecated: 183, 85, 147;
    --banner-deprecated-h2-border: #D2C3DE;

    /* plugins */
    --bg-acf: #00dab4;
    --bg-bb: #b672ba;

    /* algolia */
    --docsearch-highlight-color: var(--text-link);
    --docsearch-bg: 48, 43, 71;
}

/*==================================================
    Global
==================================================*/
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6,
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1.35em;
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

body {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text);
}

input, textarea, select, option {
    font-size: 16px;
}

h1 {
    font-size: 44px;
    line-height: 1.2;
}

h1 a, h2 a {
    text-decoration: none;
    color: var(--text-link);
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 23px;
    margin: 40px 0 30px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-gray);
}

h1 + h3 {
    margin: 30px 0;
}

.main-content h2 {
    font-size: 23px;
    margin: 40px 0 30px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-gray);
}

.main-content h3 {
    font-size: 21px;
    line-height: 1.45em;
    margin: 30px 0 18px 0;
    padding-bottom: 0;
    border-bottom: none;
}

.main-content h4 {
    font-size: 19px;
    line-height: 1.5em;
    margin: 25px 0 15px 0;
}

.main-content h5 {
    font-size: 17px;
    line-height: 1.5em;
    margin: 20px 0 12px 0;
}

.main-content h6 {
    font-size: 14px;
    line-height: 1.5em;
    margin: 20px 0 5px 0;
}

.main-content > h2:first-child,
.main-content > div h2:first-child,
.sidebar-right > h2:first-child,
.main-content > h3:first-child,
.main-content > div h3:first-child,
.sidebar-right > h3:first-child {
    margin-top: 10px;
}

p, ul, ol, table {
    margin-bottom: 17px;
}

ul:last-child, ol:last-child {
    margin-bottom: 0px;
}

.main ul > li {
    position: relative;
    margin: 0 0 12px 0;
    padding-left: 24px;
    list-style-type: none;
}

.main ol > li {
    margin-bottom: 12px;
    margin-left: 0px;
    padding-left: 0px;
}

.main ol {
    margin-bottom: 12px;
    padding-left: 24px;
}

.main .main-content ul ul,
.main .main-content ul ol,
.main .main-content ol ol,
.main .main-content ol ul {
    margin-bottom: 0;
    padding-top: 12px;
}

.main .main-content ul.compact li,
.main .main-content ol.compact li {
    margin-bottom: 6px;
}

.main .main-content ul.compact ul,
.main .main-content ul.compact ol,
.main .main-content ol.compact ol,
.main .main-content ol.compact ul {
    margin-bottom: 0;
    padding-top: 6px;
}

.main li:last-child {
    margin-bottom: 0;
}

.main ul > li:before {
    font-size: 19px;
    line-height: 1em;
    position: absolute;
    top: 0.15em;
    left: 0.2em;
    content: "\2022";
    color: var(--text-purple-gray-medium-dark);
}

.main ul.related li:before {
    font-family: 'icomoon' !important;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1em;
    top: 0.8em;
    left: 0.4em;
    content: '\e913';
    text-transform: none;
    color: var(--text-purple-gray-light);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main ul.related li a {
    text-decoration: none;
}

.main ul.related li a:hover {
    text-decoration: underline;
}

.main .main-content ul.col-2,
.main .main-content ol.col-2 {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}

strong, b {
    font-weight: 700;
}

a {
    color: var(--text-link);
}

a:hover,
a:focus {
    transition: color 0.1s, background-color 0.1s;
}

input, textarea {
    display: block;
}

iframe {
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
}

.main-content .meta {
    margin: 50px 0 20px 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-gray);
}

.main-content .meta .updated {
    font-size: 12px;
    color: var(--text-purple-gray-light);
}

.main-content .videowrapper { /*default 640x360*/
    position: relative;
    display: block;
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 56.25% 0 0 0;
}

.main-content .videowrapper.size640280 { /*640x280*/
    padding: 43.75% 0 0 0;
}

.main-content .videowrapper.size640375 { /*640x375*/
    padding: 58.59% 0 0 0;
}

/* remove width and height attributes from iframe, keep only frameborder, allow and allowfullscreen attributes*/
.main-content .videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}

img {
    margin: 0;
}

.main-content p img,
.main-content figure img {
    display: block;
}

.main-content figure {
    display: table;
}

.main-content figcaption {
    display: table-caption;
    caption-side: bottom;
}

.main-content figure.alignright figcaption {
    text-align: right;
}

.main-content figure.alignright figcaption code {
    font-size: inherit !important;
}

.main-content img.alignnone,
.main-content .wp-block-image,
.main-content figure {
    margin: 0 0 24px 0;
}

.main-content li img.alignnone,
.main-content li .wp-block-image {
    margin: 17px 0 7px 0;
}

.main-content li figure {
    margin: 17px 0 17px 0;
}

.main-content p img.alignnone:last-child,
.main-content p .wp-block-image:last-child,
.main-content p figure:last-child {
    margin: 0 0 7px 0;
}

.main-content img.alignright,
.main-content figure.alignright {
    float: right;
    max-width: 50%;
    margin: 6px 0 24px 30px;
}

.main-content img.alignleft,
.main-content figure.alignleft {
    float: left;
    max-width: 50%;
    margin: 6px 30px 24px 0;
}

.main-content .wp-block-image > a,
.main-content figure > a {
    display: block;
    overflow: hidden;
}

.main-content figcaption {
    font-size: 15px;
    line-height: 1.55em;
    padding-top: 10px;
    color: var(--text-purple-gray-dark);
}

.main-content img.border,
.main-content figure.border {
    padding: 15px;
    border: 1px solid var(--border-gray);
    background: var(--white);
}

.main a {
    text-decoration-color: rgba(var(--text-link-opacity), 0.55);
    -webkit-text-decoration-color: rgba(var(--text-link-opacity), 0.55);
    text-underline-offset: 3px;
}

.main a:hover {
    text-decoration-color: rgba(var(--text-link-hover-opacity), 0.55);
    -webkit-text-decoration-color: rgba(var(--text-link-hover-opacity), 0.55);
}

.main-content a.scroll-link {
    position: relative;
}

.main-content a.scroll-link:after {
    content: "\00a0\f069";
    font-size: 0.44em;
    color: rgba(var(--text-purple-gray-dark-opacity), 0.65);
    position: relative;
    top: -6px;
    left: -1px;
    word-spacing: 0;
    display: inline-block;
    white-space: nowrap;
}

.main-content a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after,
.main .sidebar-left a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after {
    content: "\00a0\e919";
    font-size: 0.6em;
    color: rgba(var(--text-purple-gray-dark-opacity), 0.9);
    position: relative;
    top: -1px;
    left: -1px;
    word-spacing: 0;
    display: inline-block;
    white-space: nowrap;
}

.main-content a.scroll-link:hover:after,
.main-content a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):hover:after,
.main .sidebar-left a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):hover:after,
.grid.col-33-33-33.doc-bubbles .sub-menu a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):hover:after {
    color: var(--text-link-hover);
}

.main .sidebar-left a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after,
.grid.col-33-33-33.doc-bubbles .sub-menu a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after {
    margin-left: 2px;
    color: rgba(var(--text-purple-gray-dark-opacity), 0.65);
}

.main-content a.imglink[target="_blank"][href^="https"]:after,
.main-content figure > a[target="_blank"][href^="https"]:after,
.grid.col-33-33-33.doc-bubbles > li > a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after {
    content: none !important;
}

.main-content a[target="_blank"][href^="https"].gist-link:after {
    color: var(--bg-red-soft);
    padding-left: 10px;
}

.main-content a[target="_blank"][href^="https"].gist-link:hover:after {
    color: var(--white);
    text-decoration: none;
}


/*==================================================
    Re-usable styles
==================================================*/
a.hooks-link {
    font-size: 14px;
    font-style: italic;
    display: block;
    text-align: right;
    text-decoration: none;
    color: var(--text-medium);
}

.highlight {
    background: var(--highlight);
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.sidebar h3:first-child,
.facetwp-flyout-wrap h3:first-child {
    margin-top: 0;
}

.sidebar li {
    margin: 0;
    list-style: none;
}

.facetwp-pager {
    padding-top: 30px;
}

.facetwp-pager .facetwp-page {
    display: inline-block;
    padding: 0 8px;
    color: var(--text);
    border: 1px solid var(--border-gray-medium);
    border-radius: 3px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
}

.facetwp-pager .facetwp-page.dots {
    border: none;
    background: none;
}

/*==================================================
    Banners
==================================================*/
.banner {
    font-size: 16px;
    line-height: 1.5em;
    position: relative;
    clear: both;
    margin: 24px 0 24px 0;
    padding: 11px 15px 11px 13px;
    border-left: 47px solid rgba(var(--banner-note), 1);
    background: rgba(var(--banner-note), .24);
    border-radius: 6px;
}

.banner:first-child {
    margin-top: 10px;
}

.banner:before {
    font-family: 'icomoon' !important;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.5em;
    position: absolute;
    top: 11px;
    left: -47px;
    display: inline-block;
    width: 47px;
    content: '\e918'; /* paperclip */
    text-align: center;
    text-transform: none;
    color: var(--white);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.banner span:first-child {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1em;
    margin-right: 0.3em;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.banner.info {
    border-color: rgba(var(--banner-info), 1);
    background: rgba(var(--banner-info), .22);
}

.banner.info:before {
    font-size: 16px;
    top: 11px;
    left: -46px;
    content: '\e90a'; /* i circle */
}

.banner.warning {
    border-color: rgba(var(--banner-warning), 1);
    background: rgba(var(--banner-warning), .17);
}

.banner.warning:before {
    font-size: 13px;
    top: 13px;
    left: -46px;
    content: '\e907'; /* ! triangle */
}

.banner.deprecated {
    border-color: rgba(var(--banner-deprecated), 1);
    background: rgba(var(--banner-deprecated), .17);
}

.banner.deprecated:before {
    font-size: 16px;
    top: 11px;
    left: -46px;
    content: '\e925'; /* x circle solid */
}

.main-content .banner.deprecated h2 {
    border-color: var(--banner-deprecated-h2-border);
}

/*==================================================
    Header
==================================================*/
body > .header {
    padding: 24px 42px;
    background-color: var(--bg-purple-medium);
    background-image: linear-gradient(115deg, #40229b -120%, #5124b3 78%, #bb4498 120%);
}

body.home > .header,
body.features > .header {
    background-image: linear-gradient(115deg, #40229b -120%, #5124b3 58%, #bb4498 120%);
}

#top {
    visibility: hidden;
}

body.homepage .header {
    overflow-x: hidden;
    padding-bottom: 0;
}

.logo {
    margin-top: 13px;
}

.logo a {
    display: block;
}

.logo img {
    width: 155px;
}

/*==================================================
    Topnav grid
==================================================*/
.topnav {
    font-size: 16px;
    display: grid;
    color: var(--white);
    grid-template-columns: 155px 1fr;
}

body.homepage .topnav {
    padding-bottom: 50px;
}

/*==================================================
    Topnav with WP menu
==================================================*/
.main-nav ul {
    margin: 0;
}

.main-nav li {
    display: inline-block;
    margin: 0;
    list-style-type: none;
}

.main-nav li a {
    font-size: 18px;
    display: inline-block;
    text-decoration: none;
}

.main-nav ul > li {
    display: inline-block;
    margin-left: 28px;
}

.main-nav > ul > li > a {
    line-height: 56px;
    color: var(--white);
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus {
    color: var(--text-violet-light); /*better contrast*/
}

.main-nav {
    text-align: right;
}

.main-nav .menu-item-has-children {
    position: relative;
    z-index: 10;
    display: inline-block;
}

.main-nav .menu-item-has-children ul.sub-menu {
    font-size: 16px;
    position: absolute;
    left: 0;
    display: none;
    overflow: hidden;
    padding: 0px 0;
    text-align: left;
    white-space: nowrap;
    border-radius: 4px;
    background-color: var(--white);
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .1), 0 0 0 1px rgba(0, 0, 0, .1);
}

.main-nav li ul.sub-menu li {
    display: block;
    overflow: hidden;
    margin: 0;
}

.main-nav li ul.sub-menu li a {
    font-size: 17px;
    display: block;
    padding: 7px 18px;
}

.main-nav li ul.sub-menu li:first-child a {
    padding-top: 10px;
}

.main-nav li ul.sub-menu li:last-child a {
    padding-bottom: 10px;
}

.main-nav li ul.sub-menu a:hover {
    color: var(--white);
    background-color: var(--text-link-hover);
}

.main-nav .menu-item-has-children > a:after {
    font-family: 'icomoon' !important;
    font-size: 18px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: relative;
    top: 3px;
    display: inline-block;
    margin-left: 10px;
    content: "\f107";
    text-transform: none;
    opacity: 0.7;
    color: var(--white);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-nav .menu-item-has-children > a:hover:after {
    opacity: 1;
    color: var(--text-violet-light);
}

.main-nav .menu-item-has-children:hover ul.sub-menu {
    display: block;
}

.main-nav .menu-item.help-center {
    margin-left: 93px;
}

.main-nav .menu-item.my-account {
    margin-left: 20px;
}

.main-nav .menu-item.my-account a,
.main-nav .menu-item.my-account a:hover {
    line-height: 56px;
    position: relative;
    display: inline-block;
    width: 26px;
    height: 56px;
    text-align: left;
    white-space: nowrap;
    text-indent: -9999px;
    color: transparent;
}

.main-nav .menu-item.my-account a:after {
    font-family: 'icomoon' !important;
    font-size: 13px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 56px;
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    width: 26px;
    content: "\e900";
    text-align: center;
    text-indent: 0;
    text-transform: none;
    color: var(--white);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.main-nav .menu-item.my-account a:hover:after {
    color: var(--text-violet-light);
}

.main-nav .menu-item.buy a {
    line-height: 40px;
    margin-right: 16px;
    padding: 0px 20px 0px 22px;
    -o-transition: box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1);
    -webkit-transition: box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1);
    transition: box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    transition: box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1), background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), color 0.1s cubic-bezier(0.4, 0, 0.2, 1), -webkit-box-shadow 0.1s cubic-bezier(0.4, 0, 1, 1);
    color: var(--text-link);
    border-radius: 4px;
    background-color: var(--white);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

.main-nav .menu-item.buy a:hover,
.main-nav .menu-item.buy a:focus {
    color: var(--white);
    background: var(--bg-green);
}

.main-nav .menu-item.buy a:before {
    font-family: 'icomoon' !important;
    font-size: 11px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    position: relative;
    top: -1px;
    display: inline-block;
    margin-right: 10px;
    margin-left: -6px;
    content: "\e901";
    text-transform: none;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Mobile nav */
.main-nav .menu-item.menu {
    position: relative;
    top: -1px;
    display: none;
}

.main-nav .menu-item.menu a {
    font-size: 23px;
    line-height: 56px;
    cursor: pointer;
    color: var(--white);
}

.main-nav .menu-item.menu a:hover {
    color: var(--white);
}

.main-nav .menu-item.menu a:before {
    font-size: 23px;
    position: relative;
    top: -1px;
    margin-right: 11px;
    content: '\2630';
}

.side-nav {
    font-size: 18px;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: -270px;
    display: none;
    overflow-x: hidden;
    width: 270px;
    height: 100%;
    padding: 20px 0 40px 0;
    transition: 0.2s;
    background-color: var(--bg-purple-ultra-dark);
    -webkit-overflow-scrolling: touch;
}

.side-nav ul {
    margin: 0;
}

.side-nav li {
    margin: 0;
    list-style-type: none;
}

.side-nav .sub-menu {
    margin-left: 16px;
}

.side-nav a {
    display: block;
    padding: 7px 8px 7px 36px;
    transition: 0.2s;
    text-decoration: none;
    color: var(--text-violet-light);
}

.side-nav a.side-nav-close {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-weight: 700;
    padding: 20px 40px 7px 36px;
    text-align: right;
}

.side-nav a.side-nav-close:before {
    font-size: 20px;
    font-weight: normal;
}

.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current_page_ancestor > a,
.main-nav .menu-item.my-account.current-menu-item a:after {
    color: var(--text-violet-light);
}

.main-nav > ul > li.current-menu-item.menu-item.buy > a {
    color: var(--text-link);
}

.main-nav > ul > li.current-menu-item.menu-item.buy > a:hover {
    color: var(--white);
}

.main-nav ul.sub-menu > li.current-menu-item a {
    color: var(--text-link-current);
}

.main-nav ul.sub-menu > li.current-menu-item a:hover {
    color: var(--white);
    background-color: var(--text-link-hover);
}

.side-nav .current-menu-item > a,
.side-nav .current-page-ancestor > a {
    color: var(--white);
}

/*==================================================
    Homepage splash
==================================================*/
.home-splash {
    display: grid;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0;
    color: var(--white);
    grid-template-columns: 500px 1fr;
    grid-column-gap: 40px;
}

.splash-left {
    padding: 40px 30px 0 30px;
    text-align: center;
}

.splash-left h1 {
    line-height: 1.2em;
    margin-bottom: 22px;
    text-shadow: rgba(0, 0, 0, 0.20) 0px 0px 10px;
}

.splash-left h1 span {
    white-space: nowrap;
}

.splash-left p {
    font-size: 21px;
    line-height: 32px;
    margin: 0px 20px 18px 20px;
    text-shadow: rgba(0, 0, 0, 0.20) 0px 0px 8px;
}

.splash-left p:last-child {
    margin-bottom: 42px;
}

.splash-left .action-buttons {
    padding-top: 24px;
}

.splash-right {
    position: relative; /* to support the subtext */
}

.splash-right img {
    position: relative;
    left: -1px;
    width: 650px;
    max-width: none;
    vertical-align: bottom;
}

.home-btn,
.gist-link {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 23px;
    font-weight: 700;
    line-height: 55px;
    display: inline-block;
    padding: 0px 40px 1px 40px;
    text-align: center;
    text-decoration: none;
    color: var(--white);
    border: 2px solid var(--white);
    border-radius: 6px;
}

.home-btn.closed-closed,
.home-btn.closed-open,
.home-btn.open-closed:hover {
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

.home-btn.closed-open:hover,
.home-btn.open-closed,
.gist-link:hover {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.main .gist-link {
    font-size: 18px;
    margin-top: 24px;
    color: var(--bg-red-soft);
    border: 2px solid var(--bg-red-soft);
}

.main .gist-link:hover {
    color: var(--white);
    background-color: var(--bg-red-soft);
}

.splash-left .home-btn,
.footer-cta .home-btn {
    width: 140px;
    padding-right: 0;
    padding-left: 0;
}

.home-btn.button-demo:focus,
.home-btn.button-demo:hover {
    color: var(--text-link);
    background-color: var(--white);
}

.home-btn.button-buy {
    margin-left: 20px;
    color: var(--text-link);
    background-color: var(--white);
}

.home-btn.button-buy:hover,
.home-btn.button-buy:focus {
    color: var(--white);
    border-color: var(--bg-green);
    background: var(--bg-green);
}

.footer-cta .home-btn.closed {
    color: var(--bg-red-soft);
}

.footer-cta .home-btn.closed:hover,
.footer-cta .home-btn.closed:focus {
    color: var(--white);
    border-color: var(--bg-green);
    background: var(--bg-green);
}

.footer-cta .home-btn.open:hover,
.footer-cta .home-btn.open:focus {
    color: var(--bg-red-soft);
    background: var(--white);
}

/*==================================================
    Homepage features
==================================================*/
.home-features {
    display: grid;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    grid-template-columns: 1fr 1fr;
}

.home-features .home-feature {
    padding: 30px 40px 40px 40px;
    border-right: 1px solid var(--border-gray);
    border-bottom: 1px solid var(--border-gray);
}

.home-features .home-feature.bottom {
    border-bottom: none;
}

.home-features .home-feature:nth-child(even) {
    border-right: none;
}

.home-features .home-feature h2 {
    font-size: 26px;
    line-height: 1.3em;
    padding-bottom: 14px;
}

.home-features .home-feature p {
    margin-bottom: 0;
}

.learn-more {
    margin: 60px 42px 75px 42px;
    text-align: center;
}

.home-btn.purple {
    color: var(--white);
    border-color: var(--bg-purple-dark);
    background-color: var(--bg-purple-dark);
}

.home-btn.purple:hover {
    color: var(--bg-purple-dark);
    border-color: var(--bg-purple-dark);
    background: var(--white);
}

.home-btn.white {
    color: var(--white);
    border-color: var(--white);
    background: none;
}

.home-btn.white:hover {
    color: var(--bg-violet-medium);
    border-color: var(--white);
    background: var(--white);
}

/*==================================================
    Icons
==================================================*/
body.homepage .image {
    height: 130px;
    margin-bottom: 4px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 86px 86px;
}

.icon-facets {
    background-image: url(assets/img/icons/icon-facets.svg);
}

.icon-data {
    background-image: url(assets/img/icons/icon-data.svg);
    background-size: 60px 60px;
}

.icon-data-light {
    background-image: url(assets/img/icons/icon-data-light.svg);
}

.icon-speed {
    background-image: url(assets/img/icons/icon-speed.svg);
}

.icon-design {
    background-image: url(assets/img/icons/icon-design.svg);
}

.icon-config {
    background-image: url(assets/img/icons/icon-config.svg);
}

.icon-code {
    background-image: url(assets/img/icons/icon-code.svg);
}

.icon-feather {
    background-image: url(assets/img/icons/icon-feather.svg);
}

.icon-support {
    background-image: url(assets/img/icons/icon-support.svg);
}

/*==================================================
    Code and badge template
==================================================*/
code {
    padding: 1px 5px 2px 5px;
    margin: 0 1px;
    color: var(--text-red-soft);
    border: 1px solid var(--border-gray);
    border-radius: 3px;
    background-color: var(--bg-gray-light);
}

pre {
    display: block;
    overflow: hidden;
    margin-top: 20px;
    margin-bottom: 20px;
    clear: both;
}

pre > code, pre code.hljs {
    display: block;
    overflow: auto;
    margin: 0;
    padding: 27px 27px 27px 56px;
    color: var(--text-light-code);
    border-radius: 6px;
    background: var(--bg-code);
}

.no-js pre > code,
pre > code.nohljsln {
    padding: 27px 27px;
}

pre > code.hljs {
    overflow-x: auto;
}

pre, code, pre > code * {
    font-family: ui-monospace, Courier, Cascadia Mono, Segoe UI Mono, Liberation Mono, monospace, monospace !important; /* !important hack for browsers broken monospace handling. */
    font-size: 16px !important;
    line-height: 1.55em;
    white-space: pre;
}

.banner code {
    line-height: 1.375em;
}

pre code {
    border: none;
}

pre[class^="overwrite"] .code-badge-language span {
    display: none;
}

pre.overwrite-shortcode .code-badge-language:before {
    content: "shortcode";
}

pre.overwrite-javascript .code-badge-language:before  {
    content: "javascript";
}

pre.overwrite-json .code-badge-language:before  {
    content: "json";
}

pre.overwrite-html .code-badge-language:before  {
    content: "html";
}

pre.overwrite-css .code-badge-language:before  {
    content: "css";
}

pre.overwrite-php .code-badge-language:before,
pre.overwrite-php-template .code-badge-language:before, /* backwards compat */
pre.overwrite-php-mixed .code-badge-language:before,
pre.overwrite-php-mixed-keep-tag .code-badge-language:before {
    content: "php";
}

pre.overwrite-sql .code-badge-language:before  {
    content: "sql";
}

pre.overwrite-text .code-badge-language:before  {
    content: "text";
}

pre.overwrite-jquery .code-badge-language:before  {
    content: "jquery";
}

pre.overwrite-futil .code-badge-language:before  {
    content: "futil";
}

pre.overwrite-command .code-badge-language:before  {
    content: "command";
}

pre.overwrite-setting .code-badge-language:before  {
    content: "setting";
}

pre.overwrite-url .code-badge-language:before  {
    content: "url";
}

pre.overwrite-other .code-badge-language:before  {
    content: "other";
}

table.table-code pre.hljs {
    padding: 0;
    border: none;
    background: none;
}


/*==================================================
    HighlightJS line numbers styling
==================================================*/
pre > code.linenumbers {
    padding-left: 0;
    padding-right: 0;
}

.hljs .hljs-table {
    display: table;
    border-collapse: collapse;
    width: 100%;
}

.hljs .hljs-tr {
    display: table-row;
}

.hljs .hljs-td {
    display: table-cell;
}

.hljs .hljs-ln-numbers  {
    min-width: 56px;
    width: 56px;
    text-align: right;
}

.hljs .hljs-ln-n,
.main .hljs .hljs-ln-n:hover,
.main .hljs .hljs-ln-n:focus {
    color: var(--bg-code-line-numbers);
    cursor: pointer;
    text-decoration: none;
    padding: 0 20px 0 0px;
    display: block;
    text-align: right;
    border-left: 5px solid transparent;
    outline: 0;
}

.hljs-ln-code {
    padding-left: 0px;
    padding-right: 27px;
}

.hljs .hljs-ln-n:before {
    content:attr(data-line-number);
}

.hljs .hljs-ln-n:hover:before,
.hljs .hljs-ln-n.copied:before {
    line-height: inherit;
    cursor: pointer;
    text-align: center;
    margin-right: 0;
}

.hljs .hljs-ln-n.copied:before,
.hljs .hljs-ln-n.copied:hover:before{
    font-size: 11px;
    content: "\e90b";
    color: var(--bg-green) !important;
}


.hljs .hljs-tr.active .hljs-ln-line {
    background: rgba(var(--bg-code-lines-active), .13);
}

.hljs .hljs-tr.active .hljs-ln-n {
    border-color: rgba(var(--bg-code-lines-active), 1);
    color: rgba(var(--bg-code-lines-active), 1);
}

/* prevent ios hover/click issues */
@media (hover) {

    .hljs .hljs-ln-n:hover:before {
        color: var(--white) !important;
    }

    .hljs .hljs-ln-n:hover:before {
        font-size: 10.5px;
        content: "\e91a";
    }

    .hljs .hljs-tr:hover .hljs-ln-line {
        background: rgba(var(--bg-code-lines-active), .13);
    }

    .hljs .hljs-tr:hover .hljs-ln-n {
        border-color: rgba(var(--bg-code-lines-active), 1);
        color: rgba(var(--bg-code-lines-active), 1);
    }

}

.hljs .hljs-tr.active .hljs-ln-line,
.hljs .hljs-tr.active .hljs-ln-n {
    transition-property: background, border, color;
    transition-duration: 0.6s;
    transition-timing-function: ease-in;
}

.hljs .hljs-tr.active .hljs-ln-n:hover,
.hljs .hljs-tr.active .hljs-ln-n:hover:before,
.hljs .hljs-tr.active .hljs-ln-n.copied:before {
    transition: none;
}

.hljs .hljs-tr.attention:not(.active) .hljs-ln-line {
    animation: fadebg 1.8s ease-in 0s 1 normal;
}

.hljs .hljs-tr.attention:not(.active) .hljs-ln-n {
    animation: fadelnn 1.8s ease-in 0s 1 normal;
}

@keyframes fadebg {
    0% {
        background: rgba(var(--bg-code-lines-active), .13);
    }
    100% {
        background: rgba(var(--bg-code-lines-active), 0);
    }
}

@keyframes fadelnn {
    0% {
        border-color: rgba(var(--bg-code-lines-active), 1);
        color: rgba(var(--bg-code-lines-active), 1);
    }
    100% {
        border-color: rgba(var(--bg-code-lines-active), 0);
        color: rgba(var(--bg-code-lines-active), 0);
    }
}


/*==================================================
    HighlightJS codebadge styling
==================================================*/

@media print {
    .code-badge {
        display: none;
    }
}

.code-badge-pre {
    position: relative;
    z-index: 1000;
}

pre.overwrite-text code .hljs-ln-code *,
pre.overwrite-command .hljs-ln-code code *,
pre.overwrite-setting .hljs-ln-code code *,
pre.overwrite-url .hljs-ln-code code *,
pre.overwrite-other .hljs-ln-code code * {
    color: var(--text-light-code) !important;
}

/* code block info */

pre .infoblock {
    display: none;
    position: relative;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    border-radius: 6px 6px 0px 0px;
    color: var(--white);
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    background: var(--bg-code-badge);
    white-space: normal;
}

pre .infoblock > div {
    padding: 19px 27px 24px 26px;
}

.js .code-badge-pre .infoblock {
    overflow: hidden;
    display: block;
    max-height: 6px;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

.js .code-badge-pre.hasinfoblock:not(.info-active) .infoblock {
    max-height: 6px !important;
    background: var(--bg-code);
}

.js .code-badge-pre.hasinfoblock code.hljs {
    margin-top: -6px;
}

.main-content .code-badge-pre .infoblock h2 {
    font-size: 15px;
    line-height: 1.5em;
    margin: 0px 0 6px 0;
    padding: 0;
    border: none;
    color: var(--bg-code-badge-lang-active)
}

.main-content .code-badge-pre .infoblock p {
    color: var(--text-verylight);
}

.main-content .code-badge-pre .infoblock p:last-child {
    margin: 0;
}

.main-content .code-badge-pre .infoblock a {
    color: var(--text-link-codeinfoblock);
    text-decoration-color:  var(--text-link-codeinfoblock);
    -webkit-text-decoration-color:  var(--text-link-codeinfoblock);
}

.main-content .code-badge-pre .infoblock a:hover {
    color: var(--text-link-codeinfoblock-hover);
    text-decoration-color: var(--text-link-codeinfoblock-hover);
    -webkit-text-decoration-color: var(--text-link-codeinfoblock-hover);
}

.main-content .code-badge-pre .infoblock a.moreinfo:after {
    content: "\e913";
    font-size: 0.7em;
    position: relative;
    top: 0px;
    text-decoration: none;
    margin-left: 5px;
    display: inline-block;
    white-space: nowrap;
}

.main-content .infoblock a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after {
   color: var(--text-light-code);
}

.main-content .code-badge-pre .infoblock code {
    font-size: 14px !important;
    line-height: 1.55em;
    border: 1px solid var(--border-code-infoblock);
    background-color: var(--bg-code-infoblock);
    padding: 1px 4px 2px 4px;
    margin: 0 2px;
    color: inherit;
}

/* code badge */

.code-badge {
    font-size: 15px;
    line-height: 1em;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    padding: 2px 5px;
    white-space: normal;
    opacity: 1;
    color: white;
    border-radius: 0px 6px 0px 6px;
    background: var(--bg-code-badge);
    -webkit-box-shadow: -6px 7px 5px -4px rgba(34,40,49,0.5);
    box-shadow: -6px 7px 5px -4px rgba(34,40,49,0.5);
    border-bottom: 1px solid rgba(34,40,49,0.5);
}

.code-badge > div:last-child {
    cursor: pointer;
}

.code-badge:hover,
.code-badge.active {
    background: var(--bg-code-badge-active);
}

.code-badge a,
.code-badge a:hover {
    text-decoration: none;
    color: var(--white) !important;
}

.code-badge .code-badge-language {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.6em;
    margin-right: 5px;
    padding-left: 7px;
    color: var(--bg-code-badge-lang);
    position: relative;
    top: 1px;
}

.hasinfoblock .code-badge .code-badge-language {
    margin-right: 0px;
}

.hasinfoblock .code-badge .code-badge-language:hover,
.hasinfoblock .code-badge .code-badge-language:hover:after,
.hasinfoblock.info-active .code-badge .code-badge-language,
.hasinfoblock.info-active .code-badge .code-badge-language:after{
    color: var(--bg-code-badge-lang-active);
}

.code-badge .codeblock-copy i {
    opacity: 0.6;
}

.code-badge .codeblock-link i {
    opacity: 0.5;
}

.code-badge .codeblock-link:hover i,
.code-badge .codeblock-copy:hover i {
    opacity: 1;
}

.code-badge .codeblock-copy {
    margin-right: 1px;
}

.code-badge .icon-copy,
.code-badge .icon-check,
.code-badge .icon-link {
    font-size: 12px;
    line-height: 15px;
    position: relative;
    top: 0px;
    display: block;
    padding: 6px 6px 5px 5px;
    cursor: pointer;
    text-align: center;
    width: 22px;
}

.code-badge i:before {
    line-height: 1em;
}

.code-badge .icon-link {
    margin-right: 0px;
}

.code-badge .icon-check,
.code-badge .codeblock-link.copied i:before {
    color: var(--bg-green);
    font-size: 11px;
}

.code-badge .codeblock-link.copied i:before {
    content: "\e90b";
}

.code-badge .codeblock-link.copied i,
.code-badge .codeblock-copy i.icon-check {
    opacity: 1;
}

.hasinfoblock .code-badge .code-badge-language {
    cursor: pointer;
}

.hasinfoblock .code-badge .code-badge-language {
    position: relative;
    padding-right: 24px;
}

.hasinfoblock .code-badge .code-badge-language:after {
    font-size: 13px;
    line-height: 15px;
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    padding: 6px 4px 5px 4px;
    cursor: pointer;
    text-align: center;
    width: 22px;
    color: var(--bg-code-badge-lang);
    opacity: 1;
    content: "\e909";
}

.hasinfoblock.info-active .code-badge .code-badge-language:after {
    font-size: 15px;
    top: -1px;
    content: "\e904";
}

.faqquestion .code-badge .codeblock-link {
    display: none;
}


/*==================================================
    Features page
==================================================*/
.features-splash {
    width: 630px;
    margin: 0 auto;
    padding-top: 70px;
    padding-bottom: 10px;
    text-align: center;
    color: var(--white);
}

body.features {
    overflow-x: hidden;
}

body.features .main-wide {
    max-width: 1080px;
}\e913

body.features h2 {
    padding-bottom: 40px;
    text-align: center;
}

body.features .features-splash h1 {
    padding-bottom: 0;
}

body.features .main h2,
body.features .main-wide h2,
body.features .features-callout h2 {
    font-size: 40px;
}

body.features h3 {
    font-size: 24px;
}

body.features .col-33-33-33 h3 {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
    border: none;
}

body.features .features-callout .image {
    height: 100px;
    margin-top: -5px;
    margin-bottom: 24px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 85px 85px;
}

body.features .features-callout h3 {
    text-align: center;
    color: var(--white);
}

body.features .features-callout p {
    text-align: center;
    color: var(--white);
}

body.features .features-callout .col-33-33-33 > div {
    text-align: center;
}

body.features .feature-row.single {
    padding: 60px 0;
    text-align: center;
}

body.features .feature-row picture {
    display: inline-block;
    margin-bottom: 30px;
}

body.features .feature-row.split {
    display: grid;
    grid-template-columns: 400px 1fr;
    grid-column-gap: 30px;
}

body.features .feature-row .home-btn,
body.features .features-callout .home-btn,
body.features .features-builtin .home-btn,
body.features .features-integrations .home-btn {
    font-size: 18px;
    margin-top: 12px;
}

.features-callout {
    background-color: var(--bg-violet-dark);
    background-image: url('assets/img/design/pandf-bground.svg');
    background-size: cover;
}

.features-callout h1 {
    text-align: center;
}

body.features .features-builtin .intro {
    margin-bottom: -20px;
    padding-bottom: 0;
    text-align: center;
}

.features-plugin {
    height: 180px;
    margin-bottom: 22px;
    background-repeat: no-repeat;
    background-position: center;
}

.features-plugin.woocommerce {
    background-color: var(--text);
    background-image: url('assets/img/logos/woocommerce_logo_white.png');
    background-size: 260px;
}

.features-plugin.acf {
    background-color: var(--bg-acf);
    background-image: url('assets/img/logos/logo-acf.png');
    background-size: 220px;
}

.features-plugin.beaver {
    background-color: var(--bg-bb);
    background-image: url('assets/img/logos/logo-bb@2x.png');
}

.features-integrations {
    margin-top: -40px;
    padding-bottom: 10px;
    text-align: center;
}

.integrations-wrap {
    position: relative;
    width: 214px;
    height: 115px;
    margin: 80px auto 90px auto;
    background-image: url('assets/img/design/lines-horizontal.png');
    background-size: 214px 115px;
}

.integrations-text {
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.features-integrations .home-btn {
    text-align: center;
}

.features-integrations .integrations-img {
    display: block;
    text-decoration: none;
}

.features-integrations .integration {
    position: absolute;
    background-repeat: no-repeat;
}

.features-integrations .integration.diamond {
    top: 27px;
    left: 67px;
    width: 83px;
    height: 65px;
    background-image: url('assets/img/logos/logo-diamond.png');
    background-size: 83px 65px;
}

.features-integrations .integration.wpml {
    top: -60px;
    left: -40px;
    width: 49px;
    height: 62px;
    background-image: url('assets/img/logos/logo-wpml.png');
    background-position: top right;
    background-size: 49px 62px;
}

.features-integrations .integration.flatsome {
    top: 32px;
    left: -80px;
    width: 50px;
    height: 50px;
    background-image: url('assets/img/logos/logo-flatsome.png');
    background-position: top right;
    background-size: 50px 50px;
}

.features-integrations .integration.searchwp {
    top: 100px;
    left: -40px;
    width: 59px;
    height: 59px;
    background-image: url('assets/img/logos/logo-searchwp.png');
    background-position: top right;
    background-size: 59px 59px;
}

.features-integrations .integration.relevanssi {
    top: -60px;
    left: 200px;
    width: 50px;
    height: 50px;
    background-image: url('assets/img/logos/logo-relevanssi.png');
    background-position: top left;
    background-size: 50px 50px;
}

.features-integrations .integration.polylang {
    top: 28px;
    left: 240px;
    width: 50px;
    height: 56px;
    background-image: url('assets/img/logos/logo-polylang.png');
    background-position: top left;
    background-size: 50px 56px;
}

.features-integrations .integration.wpjm {
    top: 100px;
    left: 200px;
    width: 42px;
    height: 59px;
    background-image: url('assets/img/logos/logo-wpjm.png');
    background-position: top left;
    background-size: 42px 59px;
}

/*==================================================
    Main
==================================================*/
.main a:hover {
    color: var(--text-link-hover);
}

.main h1 {
    padding-bottom: 28px;
}

/* long strings like hooks otherwise overflow on mobile */
.main-content-header h1 {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.main-content-header h2.subtitle {
    font-size: 23px;
    margin: 10px 0 30px 0;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-gray);
}

.main,
.main-wide {
    width: auto;
    margin: 0 auto;
    padding: 50px 0;
}

.main {
    max-width: 770px;
}

.main-middle {
    max-width: 1080px;
}

.main.main-wide {
    max-width: 1440px;
}

.main,
.main-middle,
.main.main-wide {
    padding-right: 40px;
    padding-left: 40px;
}

/* full height background sidebar left */
.parent-help-center .main-content-wrapper {
    display: grid;
    max-width: none;
    padding: 0;
    grid-template-columns: 1fr minmax(auto, 1360px) 1fr;
}

.parent-help-center .main-content-wrapper > div {
    width: 100%;
    max-width: 1360px;
    margin-right: auto;
}

.parent-help-center .main-content-wrapper .main-content,
.parent-help-center .main-content-wrapper .sidebar-left,
.parent-help-center .main-content-wrapper .sidebar-right {
    padding-bottom: 60px;
}

.parent-help-center .main-content-wrapper .main-content-header {
    padding-top: 4px;
}

.parent-help-center .footer-cta {
    margin-top: 0;
}

.parent-help-center .main-content-wrapper:before {
    padding-left: 40px;
    content: "";
}

.parent-help-center .main-content-wrapper:after {
    padding-right: 40px;
    content: "";
}

/*==================================================
    Grids
==================================================*/
.grid {
    display: grid;
    grid-gap: 30px;
}

.grid > div {
    min-width: 0; /* fix for <pre> within grid */
}

.grid.col-50-50 {
    grid-template-columns: 1fr 1fr;
}

.grid.col-66-33 {
    grid-template-columns: 2fr 1fr;
}

.grid.col-33-66 {
    grid-template-columns: 1fr 2fr;
}

.grid.col-75-25 {
    grid-template-columns: 3fr 1fr;
}

.grid.col-33-33-33 {
    grid-template-columns: 1fr 1fr 1fr;
}

.grid.col-25-75 {
    width: 100%;
    grid-template-columns: 290px auto;
    /*noinspection CssInvalidPropertyValue*/
    grid-template-rows: -moz-max-content 1fr;
    /*noinspection CssInvalidPropertyValue*/
    grid-template-rows: -webkit-max-content 1fr;
    grid-template-rows: max-content 1fr;
    grid-gap: 40px;
}

.grid.col-25-75 .sidebar-right {
    display: none;
}

.grid.col-20-60-20 {
    grid-template-columns: 290px 1fr 280px; /* if rightcolumn changes, change max-width: 710px for rules containing .grid.col-25-75: 1360-80-290-280=710*/
    /*noinspection CssInvalidPropertyValue*/
    grid-template-rows: -moz-max-content 1fr;
    /*noinspection CssInvalidPropertyValue*/
    grid-template-rows: -webkit-max-content 1fr;
    grid-template-rows: max-content 1fr;
    grid-gap: 40px;
}

.grid .main-content {
    grid-area: main;
}

.grid.col-25-75 .main-content,
.grid.col-25-75 .main-content-header {
    max-width: 710px;
}

body.page-template-page-helpcenter-home .grid.col-25-75 .main-content {
    max-width: none;
}

.main-content-header {
    margin-bottom: -40px;
    grid-area: header;
}

.main > .grid {
    grid-template-areas:
        'sidebarleft header'
        'sidebarleft main';
}

body.page-template-page-helpcenter-home .main > .grid,
body.parent-add-ons .main > .grid,
body.parent-help-center .main > .grid,
body.single-post .main > .grid {
    grid-template-areas:
        'sidebarleft header'
        'sidebarleft main';
}

body.page-template-page-helpcenter-home .main > .grid {
    grid-template-areas:
        'sidebarleft main';
}

body .main > .grid.col-20-60-20 {
    grid-template-areas:
        'sidebarleft header sidebarright'
        'sidebarleft main sidebarright';
}

body .main > .grid.col-75-25 {
    grid-template-areas:
        'main sidebarright';
}

/*==================================================
    Documentation settings table
==================================================*/
.settings-row {
    display: grid;
    padding: 10px;
    border-top: 1px solid var(--border-gray);
    grid-template-columns: 1fr 1fr 1fr;
}

.settings-row.row-heading {
    font-weight: bold;
    border-top: none;
    background-color: var(--bg-gray-light);
}

/*==================================================
    Demos
==================================================*/
.demo-overview {
    max-width: 740px;
    padding-bottom: 30px;
}

body.demo .facetwp-selections ul {
    margin-bottom: 30px;
    padding: 10px 16px;
    background: var(--bg-gray-light);
}

body.demo .facetwp-selections ul li {
    padding: 0;
}

body.demo .facetwp-selections ul li:before {
    content: none;
}

.facetwp-facet input[type="text"] {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    width: 200px;
    margin: 0 6px 6px 0;
    padding: 5px 32px 5px 8px;
    border: 1px solid var(--border-gray-medium);
}

.facetwp-facet select,
.facetwp-facet option {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
}

/* should be added to front.css*/
.facetwp-facet .fs-label-wrap .fs-label,
.facetwp-facet select,
.facetwp-facet option,
.facetwp-facet .noUi-handle {
    cursor: pointer;
}

.facetwp-flyout-close, .facetwp-flyout-content {
    padding: 10px 20px !important;
}

button.facetwp-flyout-open {
    font-size: 16px;
    display: none;
    margin-top: -10px;
    margin-bottom: 30px;
    padding: 6px 18px;
    cursor: pointer;
    color: var(--white);
    border: none;
    border-radius: 3px;
    background-color: var(--text-link);
}

body.demo .facetwp-pager {
    padding-top: 50px;
}

body.demo .facet-wrap h3,
body.demo .facetwp-flyout-wrap h3 {
    font-size: 19px;
    margin: 0px 0 20px 0;
}

/*temp fix plants*/
.plant-photo {
    margin-bottom: 15px;
}

.powerplant-img {
    width: 100%;
    height: 0;
    padding-bottom: 66%;
    background-size: cover;
}

/*==================================================
    Help Center
==================================================*/
.sup {
    font-size: 11px;
    font-weight: bold;
    padding-left: 3px;
    vertical-align: super;
    color: var(--bg-red-bright);
}

.main table {
    width: 100%;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    border-collapse: separate !important;
}

.main table * {
    line-height: 1.55em;
}

.main td {
    padding: 10px 16px 11px 16px;
    vertical-align: top;
    border-bottom: 1px dashed var(--border-gray);
}

.main tr:last-child td {
    padding-bottom: 15px;
    border-bottom: none;
}

.main th {
    font-weight: 600;
    padding: 10px 16px;
    vertical-align: top;
    vertical-align: top;
    border-bottom: 1px solid var(--border-gray);
}

.main tr > th {
    background-color: var(--bg-gray-light);
}

.main tr:nth-child(odd) {
    background-color: var(--bg-gray-ultra-ultra-light);
}

.main tr > td:first-child {
    width: 33%;
}

.main tr > td.sub:first-child {
    padding-left: 30px;
}

.main td img.block-icon {
    margin: -3px 12px 0 0;
    height: 1.25em;
    width: auto;
    display: inline-block;
    vertical-align: middle;
}

.col-50-50.doc-bubbles {
    padding-top: 24px;
}

.col-50-50.doc-bubbles > a {
    padding: 15px 0;
    transition: ease-out 0.1s;
    text-align: center;
    text-decoration: none;
    color: var(--text-link);
    border: 2px solid var(--text-link);
    border-radius: 6px;
    background: linear-gradient(45deg, var(--text-link) 50%, var(--white) 50%);
    background-position: 100%;
    background-size: 300%;
}

.col-50-50.doc-bubbles a:hover {
    color: var(--white);
    background-position: 0%;
}

body.page-template-page-helpcenter-home .hooks-link {
    display: none; /* Algolia search box */
}

.grid.col-33-33-33.doc-bubbles > li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.grid.col-33-33-33.doc-bubbles li:before {
    content: '';
}

.grid.col-33-33-33.doc-bubbles > li > a {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35em;
    display: block;
    margin: 0;
    padding: 30px 0 28px 0;
    transition: none;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border: none;
    border: none;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    background: var(--bg-gray-medium);
    -moz-border-radius-topright: 3px;
    -moz-border-radius-topleft: 3px;
}

.grid.col-33-33-33.doc-bubbles > li > a:hover {
    color: var(--text-link-hover);
    background-color: var(--bg-violet-light);
}

.grid.col-33-33-33.doc-bubbles > li > a:before {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 75px;
    margin: 0 auto 24px auto;
    content: '';
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.grid.col-33-33-33.doc-bubbles > li.gettingstarted > a:before {
    top: 2px;
    height: 80px;
    margin-top: -5px;
    background-image: url('assets/img/helpcenter/gettingstarted.png');
    background-size: 80px 80px;
}

.grid.col-33-33-33.doc-bubbles > li.howitworks > a:before {
    top: 2px;
    background-image: url('assets/img/helpcenter/howitworks.png');
}

.grid.col-33-33-33.doc-bubbles > li.addonfeatures > a:before {
    top: 3px;
    background-image: url('assets/img/helpcenter/addons.png');
    background-size: 70px 70px;
}

.grid.col-33-33-33.doc-bubbles > li.usingfacetwpwith > a:before {
    top: 5px;
    background-image: url('assets/img/helpcenter/integration.png');
    background-size: 70px 70px;
}

.grid.col-33-33-33.doc-bubbles > li.developers > a:before {
    top: 6px;
    height: 85px;
    margin-top: -10px;
    background-image: url('assets/img/helpcenter/developers.png');
    background-position: center center;
    background-size: 85px 85px;
}

.grid.col-33-33-33.doc-bubbles > li.troubleshooting > a:before {
    top: 4px;
    background-image: url('assets/img/helpcenter/troubleshooting.png');
}

.grid.col-33-33-33.doc-bubbles > li.tutorials > a:before {
    top: 4px;
    background-image: url('assets/img/helpcenter/tutorials.png');
}

.grid.col-33-33-33.doc-bubbles > li.codeexamplelibrary > a:before {
    top: 4px;
    background-image: url('assets/img/helpcenter/codelibrary.png');
}

.grid.col-33-33-33.doc-bubbles > li.whatsnew > a:before {
    top: 5px;
    background-image: url('assets/img/helpcenter/whatsnew.png');
    background-size: 70px 70px;
}

.grid.col-33-33-33.doc-bubbles .sub-menu {
    display: block;
    width: 100%;
    padding: 20px 24px 22px 24px;
    color: var(--text-link);
    border-top: 1px solid var(--white);
}

.main .grid.col-33-33-33.doc-bubbles .sub-menu li {
    line-height: 1.4em;
    position: relative;
    margin-bottom: 0px;
    padding-bottom: 7px;
    padding-left: 16px;
}

.grid.col-33-33-33.doc-bubbles .sub-menu li:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.grid.col-33-33-33.doc-bubbles .sub-menu li:before {
    font-family: 'icomoon' !important;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.35em;
    position: absolute;
    top: 1px;
    left: 0px;
    content: '\f105';
    text-transform: none;
    color: var(--text-purple-gray-light);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.grid.col-33-33-33.doc-bubbles .sub-menu a {
    text-decoration: none;
}

.grid.col-33-33-33.doc-bubbles .sub-menu a:hover {
    text-decoration: underline;
}

.grid.col-33-33-33.doc-bubbles .sub-menu li.more {
    margin: 3px 0 0 16px;
    padding: 0px 0 0 0;
}

.grid.col-33-33-33.doc-bubbles .sub-menu li.more:before {
    content: none;
}

.grid.col-33-33-33.doc-bubbles .sub-menu li.more:after {
    content: ' ...';
}

body.page-template-page-helpcenter-home .main-content .faq-wrapper {
    margin-top: 60px;
    margin-bottom: -30px;
}

body.page-template-page-helpcenter-home h2#faq {
    font-size: 27px;
    position: relative;
    margin-top: 20px;
}

body.page-template-page-helpcenter-home h2 .heading-link {
    top: 5px;
}

body.page-template-page-helpcenter-home .grid.faq,
body.page-template-page-faq .grid.faq {
    padding-top: 30px;
    grid-gap: 40px;
}

body.page-template-page-faq .grid.col-25-75 .main-content {
    max-width: none;
}

body.page-template-page-faq .grid.col-25-75 .content {
    max-width: 710px;
}

.grid.col-50-50.faq h2,
.grid.col-50-50.faq h3 {
    font-size: 13px;
    font-weight: 600;
    position: relative;
    margin: 0 0 14px 0px;
    padding-bottom: 9px;
    padding-top: 10px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-purple-gray-dark);
    border-bottom: 1px solid var(--border-gray);
}

.grid.col-50-50.faq .toggle-title,
.grid.col-50-50.faq .toggle-wrapper {
    padding-left: 24px;
}

.grid.col-50-50.faq li {
    line-height: 1.5em;
}

.grid.col-50-50.faq .more-link {
    position: relative;
    margin-left: 16px;
}

.grid.col-50-50.faq .more-link:before {
    font-family: 'icomoon' !important;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.6em;
    position: absolute;
    top: 0px;
    left: -16px;
    content: '\f105';
    text-transform: none;
    color: var(--text-purple-gray-light);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*==================================================
    Documentation sidebar left
==================================================*/
.parent-help-center .main-content-wrapper:before,
.parent-help-center .sidebar-left {
    background: var(--bg-gray-light);
}

.sidebar-left {
    padding-right: 20px;
    grid-area: sidebarleft;
    border-top-right-radius: 3px;
}

.sidebar-left-inner {
    padding: 30px 0;
}

body.page-template-page-helpcenter-home .sidebar-left-inner {
    padding-top: 36px;
}

.help-center .sidebar-left-inner {
    background: none;
}

.main .sidebar-left li {
    line-height: 1.4em;
    position: relative;
    margin: 0;
    padding: 0 44px 7px 0;
    list-style: none;
}

.main .sidebar-left li li {
    margin-left: 14px;
}

.main .sidebar-left .help-center-nav > ul > li {
    padding-bottom: 7px;
}

.main .sidebar-left .help-center-nav > ul li.menu-item-has-children {
    padding-bottom: 3px;
}

.main .sidebar-left li .toggle-wrapper {
    margin-top: 4px;
}

.main .sidebar-left ul.sub-menu > li:first-child {
    padding-top: 3px;
}

.main .sidebar-left ul.sub-menu > li.hook:first-child {
    padding-top: 6px;
}

.main .sidebar-left ul.sub-menu .sub-menu li.header:first-child {
    padding-top: 4px;
}

.main .sidebar-left .help-center-nav ul.sub-menu.open > li.menu-item-has-children.active:last-child {
    padding-bottom: 6px;
}

.main .sidebar-left .help-center-nav > ul > li:last-child {
    padding-bottom: 0px;
}

.main .sidebar-left .help-center-nav > ul > li.menu-item-has-children.active:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.main .sidebar-left li:before {
    content: none;
}

.main .sidebar-left a {
    text-decoration: none;
    text-underline-offset: .2rem;
}

.main .sidebar-left li.current-menu-item > a,
body.parent-faq .sidebar-left li.faq.faq-current a {
    font-weight: 600;
    color: var(--text-link-current);
    -webkit-text-decoration-color: rgba(217, 63, 124, 0.55);
    text-decoration-color: rgba(217, 63, 124, 0.55);
}

.main .sidebar-left .help-center-nav > ul > li.current-menu-item > a,
.main .sidebar-left .help-center-nav li.current-menu-ancestor > a,
.main .sidebar-left .help-center-nav li.current-page-ancestor > a,
body.parent-faq .sidebar-left li#menu-item-137400 a {
    font-weight: 600;
}

.main .sidebar-left li.current-menu-item.no-current > a {
    color: var(--text-link-current);
}

.main .sidebar-left li.current-page-ancestor.no-current-parent > a {
    color: var(--text-link);
    font-weight: normal;
}

.main .sidebar-left li.current-page-ancestor.no-current-parent > a:hover {
    color: var(--text-link-hover);
}

.main .sidebar-left .help-center-nav li.helpcenter-home.current-page-ancestor > a,
.main .sidebar-left .help-center-nav li.faq.current-menu-item > a {
    font-weight: normal;
}

.main .sidebar-left .help-center-nav li.faq.current-menu-item > a,
.main-nav ul.sub-menu > li.faq.current-menu-item > a {
    color: var(--text-link);
}

.main .sidebar-left .help-center-nav li.faq.current-menu-item > a:hover {
    color: var(--text-link-hover);
}

/* Alias exception */
.main .sidebar-left .help-center-nav > ul > li.alias > a {
    color: var(--text-link);
    font-weight: normal;
}

/* Alias exception */
.main .sidebar-left .help-center-nav > ul > li.alias > a:hover {
    color: var(--text-link-hover);
}

.main-nav ul.sub-menu > li.faq.current-menu-item > a:hover {
    color: var(--white);
}

.sidebar-left a:hover {
    text-decoration: underline;
}

.sidebar-left .sub-menu .submenu {
    padding-top: 8px;
    padding-right: 0px;
}

.no-js .sidebar-left .menu-item-has-children > i {
    display: none;
}

.sidebar-left .menu-item-has-children > i {
    font-size: 11px;
    line-height: 18px;
    position: relative;
    top: 4px;
    display: inline-block;
    float: right;
    width: 18px;
    height: 18px;
    margin-right: -28px;
    cursor: pointer;
    -o-transition: transform 0.1s ease-in;
    -webkit-transition: -webkit-transform 0.1s ease-in;
    transition: -webkit-transform 0.1s ease-in;
    transition: transform 0.1s ease-in;
    transition: transform 0.1s ease-in, -webkit-transform 0.1s ease-in;
    text-align: center;
}

.sidebar-left .menu-item-has-children.active > i {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform-origin: center center;
}

.sidebar-left .menu-item-has-children > i:before {
    /*content: '\f107'; !* angle *!*/
    font-size: 11px;
    line-height: 18px;
    position: relative;
    top: -1px;
    display: inline-block;
    content: '\e91e';
    color: var(--text-purple-gray-light);
}

.sidebar-left .menu-item-has-children.active > i:before {
    font-size: 1.05em;
}

.sidebar-left .menu-item-has-children > i:hover {
    cursor: pointer;
}

.sidebar-left .menu-item-has-children > i:hover:before {
    color: var(--text-link-hover);
}

.sidebar-left .toggle-wrapper {
    margin-right: -44px;
    margin-left: 0px;
    border-left: 1px solid var(--border-gray);
}

.js .sidebar-left .toggle-wrapper {
    overflow: hidden;
    max-height: 0px;
    -moz-transition: max-height 0.15s ease-in;
    -o-transition: max-height 0.15s ease-in;
    -webkit-transition: max-height 0.15s ease-in;
    transition: max-height 0.15s ease-in;
    /*transition: max-height 0.2s, opacity 0.1s 0.05s;*/
    /*opacity: 0;*/
}

.js .sidebar-left .toggle-wrapper .sub-menu {
    overflow: hidden;
}

.js .sidebar-left .toggle-wrapper.open {
    /*opacity: 1;*/
}

.main .sidebar-left .help-center-nav li.header {
    font-size: 12px;
    font-weight: 600;
    margin-right: 20px;
    margin-bottom: 10px !important;
    padding: 18px 0 5px 0;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-gray);
}

.main .sidebar-left .help-center-nav .sub-menu li.header {
    padding-top: 12px;
}

.main .sidebar-left .help-center-nav .sub-menu .sub-menu li.header {
    padding-top: 12px;
}

.main .sidebar-left .help-center-nav .sub-menu .sub-menu li.header:first-child {
    padding-top: 12px;
}

.main .sidebar-left .help-center-nav li.header + .hook {
    margin-top: -4px;
}

.main .sidebar-left li.header.current-menu-item a,
.main .sidebar-left li.header.current_page_item a,
.main .sidebar-left li.header.current-page-ancestor a,
.main .sidebar-left li.header a {
    color: var(--text-purple-gray-dark);
}

.main .sidebar-left li.header a:hover {
    color: var(--text-link-hover);
    text-decoration: none;
}

.sidebar-left li.header.no-link a:hover {
    cursor: default;
    text-decoration: none;
    color: var(--text-purple-gray-dark);
}

.main .sidebar-left li.hook {
    font-size: 14px;
    padding-top: 3px;
    padding-top: 3px;
}

.js .sidebar-left li.hook:last-child {
    padding-bottom: 8px !important;
}

/*==================================================
    Documentation sidebar right
==================================================*/
.sidebar-right {
    grid-area: sidebarright;
}

.sidebar-right-inner {
    font-size: 16px;
    position: relative;
    padding: 18px 22px;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.sidebar-right-inner .toc-wrapper + .custom-content-wrapper,
.sidebar-right-inner .toc-wrapper + .related-wrapper {
    margin-top: 26px;
}

.sidebar-right-inner .related-wrapper {
    margin-top: 26px;
}

.sidebar-right-inner a.top-link + .custom-content-wrapper,
.sidebar-right-inner a.top-link + .related-wrapper {
    margin-top: 0px;
}

.sidebar-right-inner .sidebar-right-content-wrapper h3 {
    font-size: 17px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45em;
    margin: 16px 0 12px 0;
    padding-bottom: 8px;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-purple-gray-dark);
    border-bottom: 1px solid var(--border-gray);
}

.sidebar-right-inner .sidebar-right-content-wrapper > a.top-link + div h3:first-child {
    padding-right: 24px;
}

/* scroll to top link*/
.sidebar-right .sidebar-right-inner a.top-link {
    position: absolute;
    z-index: 10;
    top: 15px;
    right: 16px;
    display: inline-block;
    padding: 0 6px;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-purple-gray-light);
}

.sidebar-right .sidebar-right-inner a.top-link:hover i:before {
    color: var(--text-link-hover);
}

.sidebar-right .sidebar-right-inner a.top-link i:before {
    font-size: 14px;
}

.sidebar-right-inner h2:first-child,
.sidebar-right-inner h3:first-child {
    margin-top: 0;
}

.sidebar-right-inner h4 {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45em;
    margin: 16px 0 10px 0;
    padding: 0;
    border: none;
}

.main .sidebar-right-inner li {
    line-height: 1.35em;
    margin: 0;
    margin-bottom: 6px;
}

.main .sidebar-right-inner li:before {
    top: 1px;
    left: 0.2em;
}

.main .sidebar-right-inner ul li {
    padding-left: 22px;
    list-style-type: none;
}

.main .sidebar-right-inner ol li {
    margin-left: 0;
    padding-left: 0;
}

.main .sidebar-right-inner ol {
    padding-left: 22px;
}

.main .sidebar-right-inner li:last-child {
    margin-bottom: 0px;
}

.main .sidebar-right-inner .toc-wrapper li,
.main .sidebar-right-inner .related-wrapper li {
    padding: 0;
}

.main .sidebar-right-inner .toc-wrapper li:last-child,
.main .sidebar-right-inner .related-wrapper li:last-child {
    margin-bottom: 0px;
}

.main .sidebar-right-inner .toc-wrapper li:before,
.main .sidebar-right-inner .related-wrapper li:before {
    content: none;
}

.main .sidebar-right-inner .toc-wrapper li.related {
    display: none;
}

/* temp hack until all first level h3s are replaced in all pages by h2s in proper hierarchy*/
.sidebar-right-inner .toc-wrapper .h3 ~ .h4 {
    padding-left: 10px;
}

.sidebar-right-inner .toc-wrapper .h3 ~ .h4 ~ .h5 {
    padding-left: 20px;
}

.sidebar-right-inner .toc-wrapper .h4 ~ .h5 ~ .h6 {
    padding-left: 30px;
}

.sidebar-right-inner .toc-wrapper .h2 ~ .h3 {
    padding-left: 10px;
}

.sidebar-right-inner .toc-wrapper .h2 ~ .h3 ~ .h4 {
    padding-left: 20px;
}

.sidebar-right-inner .toc-wrapper .h2 ~ .h3 ~ .h4 ~ .h5 {
    padding-left: 30px;
}

.sidebar-right-inner .toc-wrapper .h2 ~ .h3 ~ .h4 ~ .h5 ~ .h6 {
    padding-left: 40px;
}

.sidebar-right-inner li a {
    text-decoration: none;
}

.sidebar-right-inner li a:hover {
    text-decoration: underline;
}

.sidebar-right-inner p {
    line-height: 1.5em;
}

.sidebar-right-inner p,
.sidebar-right-inner ul,
.sidebar-right-inner ol {
    margin-bottom: 12px;
}

.sidebar-right-inner p:last-child,
.sidebar-right-inner ul:last-child,
.sidebar-right-inner ol:last-child {
    margin-bottom: 0;
}

.sidebar-right-inner #tableofcontents li a:active,
.sidebar-right-inner #tableofcontents li a:focus {
    color: var(--text-link);
}

.sidebar-right-inner #tableofcontents li a:hover:active,
.sidebar-right-inner #tableofcontents li a:hover:focus {
    color: var(--text-link-hover);
}

.sidebar-right-inner #tableofcontents li a.active,
.sidebar-right-inner #tableofcontents li a.active:hover {
    color: var(--text-link-current);
}

.sidebar-right-inner #tableofcontents li.sub-version {
    display: none;
}

@media (min-width: 1201px) {
    .sidebar-right-inner {
        position: sticky;
        top: 30px;
    }

    .sidebar-right-inner.larger-than-viewport {
        position: relative;
        top: 0;
    }

    .sidebar-right-inner.larger-than-viewport #tableofcontents li a.active {
        color: var(--text-link); /* no scrollspy active coloring */
    }

}

/*==================================================
    Specific pages
==================================================*/
body.shortcodes .hooks-link {
    display: none;
}

/*==================================================
    Breadcrumbs
==================================================*/
.breadcrumbs-bar {
    padding: 16px 40px 16px 40px;
}

.breadcrumbs-bar .main-wide {
    max-width: 1360px;
    padding: 0 0 0 0;
}

.main .breadcrumbs {
    font-size: 15px;
    margin: 0;
    padding: 0 0 0 0;
    list-style-type: none;
}

.main .breadcrumbs li {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main .breadcrumbs li:before {
    content: none;
}

.breadcrumbs li a {
    text-decoration: none;
    color: var(--text-purple-gray-dark);
}

.breadcrumbs li a:hover {
    text-decoration: underline;
    color: var(--text-link-hover);
}

.breadcrumbs li:after {
    font-family: 'icomoon' !important;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: relative;
    top: 1px;
    display: inline-block;
    margin: 0 7px 0 5px;
    content: "\f105";
    text-transform: none;
    color: var(--text-purple-gray-medium);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.breadcrumbs li.crumb:last-child a {
    font-weight: 600;
}

.breadcrumbs li.crumb:last-child:after {
    content: none;
}

.breadcrumbs li.crumb:last-child a {
    text-decoration: none;
    pointer-events: none;
}

/*==================================================
    Troubleshooter
==================================================*/
.placeholder {
    margin-top: 40px;
    background: var(--text-red-soft);
}

.tb-link {
    display: inline-block;
    margin: 0px 15px 15px 0;
}

p.tb-content {
    margin-bottom: 30px;
}

/*==================================================
    Contact
==================================================*/
.contact-box.hidden {
    display: none;
}

.contact-type {
    font-size: 16px;
}

body.page-id-5771 .main-content img {
    float: left;
    width: 200px;
    max-width: 35%;
    margin: 3px 30px 15px 0;
}

body.page-id-5771 .main-content > div {
    display: block;
    overflow: hidden;
}

/*==================================================
    Changelog
==================================================*/
.page-template-template-docs-addon #changelog h2 {
    position: relative;
    margin-top: 15px;
}

.page-template-template-docs-addon #changelog {
    overflow: hidden;
    clear: both;
    margin-top: 45px;
    padding: 6px 30px 30px 30px;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.page-template-template-docs-addon #changelog ul {
    margin-bottom: 0;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-gray);
}

.page-template-template-docs-addon #changelog ul:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
    border-bottom: none;
}

.page-template-template-docs-addon #changelog p {
    margin-top: 20px;
}

#changelog h2 {
    font-size: 21px;
    margin-bottom: 24px;
}

#changelog ul {
    margin-bottom: 20px;
}

#changelog li {
    font-size: 15px;
    display: grid;
    margin: 0 0 12px 0;
    padding-left: 0;
    grid-template-columns: 110px 1fr;
}

#changelog li:last-child,
#changelog ul:last-child {
    margin-bottom: 0;
}

#changelog li:before {
    content: none;
}

#changelog span.log-item {
    font-weight: 600;
    display: inline-block;
    padding: 2px 0 2px 8px;
    border-left: 5px solid var(--bg-blue-hard); /* blue */
}

#changelog span.log-text {
    display: inline-block;
    padding: 2px 0 2px 0px;
}

#changelog span.log-text:first-letter {
    text-transform: uppercase;
}

#changelog span.log-item.log-important {
    border-color: var(--bg-red-hard); /* red */
}

#changelog span.log-item.log-improve {
    border-color: var(--bg-green-dark); /* green */
}

#changelog span.log-item.log-fix {
    border-color: var(--bg-yellow-dark); /* orange */
}

body.changelog #changelog > ul > li:first-child,
body.changelog-old #changelog > ul > li:first-child {
    position: absolute;
    margin: -57px 0 0 110px;
    grid-template-columns: minmax(220px, 1fr);
}

#changelog p,
#changelog p * {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3em;
}

#changelog p {
    margin-top: 30px;
}

.page-template-template-docs-addon #changelog h3 {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 17px;
    line-height: 1.3em;
}

.page-template-template-docs-addon #changelog h3 span:last-child {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.7em;
}

.page-template-template-docs-addon #changelog h3 {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 110px 1fr;
}

/*==================================================
    Add-ons bubbles and add-on page
==================================================*/
body.parent-add-ons .is-hidden {
    display: none;
}

body.add-ons .main.intro p:last-child {
    margin-bottom: 0;
}

body.add-ons .home-features {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 30px;
}

body.add-ons h1,
body.add-ons h2,
body.add-ons p {
    text-align: center;
}

body.add-ons .main h2 {
    margin-bottom: 20px;
}

body.add-ons .home-features {
    margin-top: 40px;
}

body.add-ons .main-wide {
    padding-top: 0px;
}

.add-on {
    position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    border: none;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.add-on-bubble {
    display: block;
    overflow: hidden;
    padding: 50px 30px 95px 30px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
}

a.add-on-bubble:hover {
    background: var(--bg-violet-light);
}

.add-on .addon-details {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0;
    border-top: 1px solid var(--white);
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-bottomright: 3px;
    -moz-border-radius-bottomleft: 3px;
}

.add-on .addon-details .version-date {
    padding: 15px 18px 17px 18px;
    background: var(--bg-gray-medium);
}

.add-on .addon-details p.version {
    font-size: 15px;
    font-weight: 600;
    line-height: 1em;
    margin-bottom: 0;
}

.add-on .addon-details p.version a {
    text-decoration: none;
}

.add-on .addon-details p.version a:hover {
    text-decoration: underline;
    text-underline-offset: .1rem;
}

.add-on .addon-details p.date {
    font-size: 13px;
    font-weight: normal;
    line-height: 1em;
    display: block;
    margin-top: 6px;
    margin-bottom: 0;
    color: var(--text-purple-gray-medium);
}

.add-on-bubble h3 {
    font-size: 22px;
    margin: 0;
    padding-top: 14px;
    padding-bottom: 12px;
    color: var(--text);
    border: none;
}

.add-on-bubble p {
    margin: 0;
}

a.add-on-bubble:hover h3 {
    color: var(--text-link-hover);
}

.add-on-bubble .third-party,
.add-on-bubble .pro {
    font-size: 11px;
    font-weight: 700;
    line-height: 2em;
    position: relative;
    top: -2px;
    display: inline-block;
    margin-left: 7px;
    padding: 0px 6px;
    cursor: help;
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--white);
    background: var(--bg-green);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 2px 2px -2px rgba(0, 0, 0, 0.05), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

.sidebar-right .add-on-bubble .third-party,
.sidebar-right .add-on-bubble .pro {
    padding: 0px 5px 0px 6px;
}

.add-on-bubble .pro span,
.add-on-bubble .third-party span {
    font-size: 13px;
    line-height: 13px;
    margin-right: -1px;
    margin-left: 2px;
}

.add-on-bubble img {
    width: 74px;
    height: 74px;
    margin: 0 auto;
}

.add-ons .add-on.blocks .add-on-bubble img {
    width: 80px;
    height: 80px;
    margin: -3px auto;
}

.add-on.beaver-builder-integration img {
    position: relative;
    top: -6px;
    width: 90px;
    height: 90px;
    margin-bottom: -16px;
}

.add-on .type,
.main-content-header .type {
    font-size: 12px;
    font-weight: 600;
    line-height: 1em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 7px 25px 6px 9px;
    text-transform: uppercase;
    color: var(--white);
    border: 1px solid var(--white);
    border-top: none;
    border-right: none;
    border-radius: 0 3px 0 3px;
}

.main-content-header .type {
    position: relative;
    float: right;
    margin: -4px 0 20px 20px;
    padding: 8px 28px 7px 9px;
}

.add-on .type i {
    font-size: 11px;
    position: absolute;
    top: 6px;
    right: 6px;
}

.main-content-header .type i {
    font-size: 12px;
    position: absolute;
    top: 7px;
    right: 7px;
}

.add-on.facet-type .type,
.main-content-header .type.facet-type,
.add-on.facet-type .download .button {
    background: var(--bg-blue-soft);
}

.add-on.feature .type,
.main-content-header .type.feature,
.add-on.feature .download .button {
    background: var(--bg-orange);
}

.add-on.integration .type,
.main-content-header .type.integration,
.add-on.integration .download .button {
    background: var(--bg-mint-green);
}

.add-on.tool .type,
.main-content-header .type.tool,
.add-on.tool .download .button {
    background: var(--bg-red-soft);
}

.page-template-template-docs-addon .add-on {
    margin-bottom: 30px;
}

.page-template-template-docs-addon .add-on-bubble {
    width: 100%;
    padding: 26px 24px 20px 24px;
}

.page-template-template-docs-addon .add-on .type {
    display: none;
}

.page-template-template-docs-addon .add-on-bubble img {
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto;
}

.page-template-template-docs-addon .add-on.blocks .add-on-bubble img {
    display: block;
    width: 66px;
    height: 66px;
    margin: -3px auto;
}

.page-template-template-docs-addon .add-on.beaver-builder-integration img {
    position: relative;
    top: -6px;
    width: 76px;
    height: 76px;
    margin-bottom: -16px;
}

.page-template-template-docs-addon .add-on p {
    font-size: 16px;
    line-height: 1.5em;
}

.page-template-template-docs-addon .add-on-bubble p.subtitle {
    display: none;
}

.page-template-template-docs-addon .add-on h3 {
    padding-top: 16px;
    padding-bottom: 0px;
}

.page-template-template-docs-addon .add-on .addon-details {
    position: static;
    width: auto;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--white);
}

.page-template-template-docs-addon .add-on .download {
    padding: 16px 18px 22px 18px;
}

.page-template-template-docs-addon .add-on .download + .version-date {
    border-top: 1px solid var(--white);
}

.page-template-template-docs-addon .add-on.facet-type .download {
    border-left: 5px solid var(--bg-blue-soft);
    background: rgba(var(--bg-blue-soft-opacity), 0.10);
}

.page-template-template-docs-addon .add-on.feature .download {
    border-left: 5px solid var(--bg-orange);
    background: rgba(var(--bg-orange-opacity), 0.10);
}

.page-template-template-docs-addon .add-on.integration .download {
    border-left: 5px solid var(--bg-mint-green);
    background: rgba(var(--bg-mint-green-opacity), 0.10);
}

.page-template-template-docs-addon .add-on.tool .download {
    border-left: 5px solid var(--bg-red-soft);
    background: rgba(var(--bg-red-soft-opacity), 0.10);
}

.page-template-template-docs-addon .add-on .download p {
    font-size: 14px;
    line-height: 1.45em;
    margin-bottom: 15px;
}

.page-template-template-docs-addon .add-on .download p.extrainfo {
    margin: 17px 0 -3px 0;
}

.page-template-template-docs-addon .add-on.feature .download p.extrainfo span {
    font-size: 15px;
    margin-right: 2px;
}

.page-template-template-docs-addon .add-on .download .button {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 34px;
    display: inline-block;
    height: 34px;
    padding: 0 12px 0 15px;
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--white);
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

.page-template-template-docs-addon .add-on .download .button:hover {
    background: var(--bg-green);
}

.page-template-template-docs-addon .add-on .download i {
    font-size: 11px;
    display: inline-block;
    margin-right: 7px;
    margin-left: -3px;
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

body.parent-add-ons .btn-download {
    font-weight: bold;
    display: inline-block;
    margin-top: 30px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--white);
    border-radius: 6px;
    background-color: var(--bg-red-soft);
}

/*==================================================
    Buy page
==================================================*/
.edd-item-quantity,
body.page-id-5951 .edd_download_quantity_wrapper {
    display: none;
}

.twitter-tweet {
    width: 100% !important;
}

.question-title {
    font-weight: bold;
}

body.page-id-5951 h1 {
    text-align: center;
}

body.page-id-5951 p.intro {
    text-align: center;
}

body.page-id-5951 .buy-pricingtable .main .grid {
    padding-top: 40px;
}

body.page-id-5951 .buy-pricing {
    overflow: hidden;
    text-align: center;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

body.page-id-5951 .pricing-label {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: 700;
    padding: 19px 0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--white);
    background: linear-gradient(180deg, var(--bg-orange-dark), var(--bg-orange-red));
    background-color: var(--bg-orange-dark);
}

body.page-id-5951 .pricing-label i {
    font-size: 14px;
    margin-left: 10px;
    color: var(--bg-orange-light);
}

body.page-id-5951 .pricing-label i + i {
    margin-left: 5px;
}

body.page-id-5951 .pricing-content {
    padding: 30px 0 50px 0;
}

body.page-id-5951 .pricing-price {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 46px;
    font-weight: 700;
}

body.page-id-5951 .pricing-price span {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: normal;
    position: relative;
}

body.page-id-5951 .pricing-price span:first-child {
    font-size: 26px;
    top: -5px;
    margin-right: 7px;
}

body.page-id-5951 .pricing-price span:last-child {
    top: -6px;
    margin-left: -3px;
}

body.page-id-5951 .pricing-features {
    width: 80%;
    max-width: 260px;
    margin: 0 auto;
    padding: 20px 0 40px 0;
}

body.page-id-5951 .pricing-features div {
    font-size: 18px;
    line-height: 1.4em;
    position: relative;
    display: block;
    margin: 0 0 7px 35px;
    text-align: left;
}

body.page-id-5951 .pricing-features div:before {
    font-family: 'icomoon' !important;
    font-size: 15px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.68em;
    position: absolute;
    top: 0px;
    left: -28px;
    margin-right: 10px;
    content: '\e917';
    text-transform: none;
    color: var(--bg-green);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.page-id-5951 .pricing-buy a {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    display: inline-block;
    padding: 0px 26px 2px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--white);
    border: 2px solid var(--bg-green);
    border-radius: 6px;
    background: var(--bg-green);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

body.page-id-5951 .pricing-buy a span {
    font-size: 14px;
    position: relative;
    top: -1px;
    margin-right: 10px;
    color: var(--white);
}

body.page-id-5951 .pricing-buy a:hover {
    border: 2px solid var(--bg-purple-dark);
    background: var(--bg-purple-dark);
}

body.page-id-5951 .buy-reviews {
    color: var(--white);
    background-color: var(--bg-violet-dark);
    background-image: url('assets/img/design/hp-bground-lg.svg');
    background-size: cover;
}

body.page-id-5951 .buy-reviews h2 .icon-heart:before {
    font-size: 1em;
    margin: 0 4px;
    color: var(--bg-red-bright);
}

body.page-id-5951 .buy-reviews .quote {
    font-size: 18px;
    line-height: 1.8em;
}

body.page-id-5951 .buy-reviews .user {
    font-style: normal;
}

body.page-id-5951 .buy-reviews h2 {
    margin-bottom: 40px;
    text-align: center;
}

body.page-id-5951 .buy-faq .grid {
    margin-bottom: -17px;
}

body.page-id-5951 .buy-faq h2 {
    margin-bottom: 50px;
    text-align: center;
}

body.page-id-5951 .buy-faq h3 {
    font-size: 16px;
    margin: 0 0 10px 0;
}

.trial-note {
    font-size: 16px;
    margin-top: 20px;
    padding: 30px 30px;
    text-align: center;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.trial-note p:last-child {
    margin: 0;
}

.trial-note p strong {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2rem;
}

.trial-note p a {
    font-weight: 600;
    white-space: nowrap;
}

.trial-note p i {
    font-size: 18px;
    position: relative;
    top: 0.1em;
    margin: 0 9px 0 0;
    color: var(--bg-red-bright);
}

/*==================================================
    Footer
==================================================*/
.footer-cta {
    margin-top: 30px;
    padding: 80px 30px 88px 30px;
    text-align: center;
    color: var(--white);
    background: var(--bg-violet-red);
    background: url('assets/img/design/cta-footer-bground.svg');
    background: url('assets/img/design/cta-footer-bground.svg'), linear-gradient(110deg, rgba(216, 47, 91, .85) 10%, rgba(106, 34, 168, .85) 50%, rgba(48, 24, 96, 1) 100%);
    background-repeat: no-repeat;
    background-position: 20% top;
    background-size: 100% 100%;
}

.footer-cta .cta-text {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    padding-bottom: 46px;
}

.footer {
    font-size: 18px;
    padding: 80px 15px 60px 15px;
    text-align: center;
    color: var(--white);
    background: linear-gradient(150deg, rgba(15, 15, 63, 1) -50%, rgba(32, 19, 70, 1) 50%, rgba(81, 36, 179, 1) 130%);
    background-color: var(--bg-purple-ultra-dark);
}

.footer .logo img {
    width: 180px;
}

.footer a {
    margin-right: 30px;
    color: var(--white);
}

.footer a:last-child {
    margin-right: 0;
}

.footer .footer-links {
    padding: 55px 0 80px 0;
}

.footer .footer-links a {
    text-decoration: none;
    color: var(--white);
}

.footer .footer-links a:hover {
    text-decoration: underline;
    text-underline-offset: .2rem;
    color: var(--text-violet-light);
}

.footer .footer-links a.link-twitter,
.footer .footer-links a.link-twitter:hover {
    text-decoration: none;
}

.footer .footer-links a.link-twitter {
    font-size: 17px;
    position: relative;
    top: 1px;
}

.footer .footer-links a.link-twitter span:before {
    font-size: 19px;
}

.footer .footer-copyright {
    font-size: 16px;
    color: var(--text-purple-medium);
}

.footer .footer-copyright a {
    text-decoration: none;
    color: var(--text-purple-medium-light);
}

.footer .footer-copyright span {
    margin: 0 10px;
}

.footer .footer-copyright span:first-child {
    margin-left: 0;
}

.footer .footer-copyright span:last-child {
    margin-right: 0;
}

.footer .footer-copyright a:hover {
    text-decoration: underline;
    text-underline-offset: .2rem;
    color: var(--text-violet-light);
}

/*==================================================
    Trial
==================================================*/
.iframe-wrapper {
    margin-top: 30px;
    padding: 20px 15px;
    border-radius: 3px;
    background: var(--bg-gray-light);
}

.iframe-wrapper iframe {
    margin: 0 auto;
}

/*==================================================
    My Account
==================================================*/
body.page-id-23 .main-wide {
    max-width: 1080px;
}

body.page-id-23 .purchase-history {
    display: none;
}

body.page-id-23.logged-in .purchase-history {
    display: block;
}

body.page-id-23 .eddnl-form input[name="eddnl_email"] {
    font-size: 17px;
    width: 400px;
}

body.page-id-23 .eddnl-submit {
    margin-top: 30px;
}

/*==================================================
    Checkout
==================================================*/
body.checkout .nav {
    display: none;
}

body.checkout #edd_purchase_submit .button.green,
body.checkout .edd-apply-discount {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 48px;
    display: inline-block;
    padding: 0px 26px 2px 26px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: var(--white);
    border: 2px solid var(--bg-green);
    border-radius: 6px;
    background: var(--bg-green);
    -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 2px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0);
}

body.checkout #edd_purchase_submit .button.green:hover,
body.checkout .edd-apply-discount:hover {
    border-color: var(--bg-green);
    background-color: var(--bg-green);
}

body.checkout #edd_show_discount {
    margin-bottom: 36px;
}

#edd-discount-code-wrap {
    margin-top: -15px;
    margin-bottom: 40px;
}

body.checkout .edd-apply-discount {
    font-size: 17px;
    line-height: 30px;
    margin-left: 10px;
    padding: 1px 14px 2px 14px;
    border-radius: 3px;
}

.edd-required-indicator {
    color: var(--bg-red-bright);
}

.edd-page input {
    display: inline-block;
}

body.checkout .edd-payment-icons,
body.checkout .edd-description,
body.edd-page .edd-description,
body.checkout legend,
body.edd-page legend,
#edd_secure_site_wrapper,
#edd_checkout_cart thead {
    display: none;
}

table#edd_checkout_cart {
    margin-bottom: 30px;
}

.main table#edd_checkout_cart * {
    line-height: 1.3em;
}

table#edd_checkout_cart .edd_cart_item_name,
table#edd_checkout_cart .edd_cart_total {
    /*background: none;*/
}

table#edd_checkout_cart .edd_checkout_cart_item_title {
    font-size: 18px;
    font-weight: 600;
    display: inline-block;
    margin: 0 0 5px 0;
}

table#edd_checkout_cart .eddr-cart-item-notice * {
    font-size: 15px;
}

table#edd_checkout_cart td {
    padding: 14px 16px 16px 16px;
    border-top: 1px dashed var(--border-gray);
}

table#edd_checkout_cart th {
    padding: 14px 16px 16px 16px;
}

table#edd_checkout_cart td p:last-child {
    margin-bottom: 0;
}

table#edd_checkout_cart .edd_cart_total {
    border: none;
    border-top: 1px solid var(--border-gray);
}

.edd_cart_item_price,
.edd_cart_actions,
.edd_cart_total {
    text-align: right;
}

body.checkout fieldset,
body.edd-page fieldset {
    border: 0;
}

body.checkout fieldset#edd_register_fields p#edd-login-account-wrap,
body.checkout fieldset#edd_login_fields p#edd-new-account-wrap {
    margin: 0px 0 30px 0;
    padding: 16px 16px;
    background: var(--bg-gray-light);
}

body.checkout #edd_payment_mode_select_wrap {
    margin-bottom: 25px;
}

body.checkout fieldset#edd_payment_mode_select {
    margin-bottom: 15px;
}

body.checkout fieldset#edd_payment_mode_select label.edd-gateway-option {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 3px;
}

body.checkout fieldset#edd_payment_mode_select label.edd-gateway-option-selected {
    background-color: rgba(0, 188, 212, 0.1);
}

body.checkout fieldset#edd_payment_mode_select label.edd-gateway-option input.edd-gateway {
    margin-right: 8px;
}

body.checkout fieldset#edd_payment_mode_select label.edd-gateway-option img {
    height: 24px;
    vertical-align: top;
}

body.checkout .edd_cart_remove_item_btn {
    position: relative;
    padding-right: 20px;
    text-decoration: none;
    text-transform: lowercase;
}

body.checkout .edd_cart_remove_item_btn:hover {
    text-decoration: underline;
}

body.checkout .edd_cart_remove_item_btn:after {
    font-family: 'icomoon' !important;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: absolute;
    top: 4px;
    right: 0;
    display: inline-block;
    margin-left: 0px;
    content: "\e904";
    text-transform: none;
    opacity: 0.7;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.checkout fieldset#edd_discount_code label,
body.checkout fieldset#edd_payment_mode_select legend {
    display: none;
}

body.checkout #edd_purchase_form_wrap label,
body.edd-page #edd_checkout_form_wrap label {
    display: inline-block;
    width: 280px;
}

body.checkout #edd_purchase_form_wrap p {
    padding: 0 0 5px 0;
}

body.checkout #edd_checkout_login_register input,
body.checkout #edd_checkout_user_info input,
body.edd-page #edd_cc_fields input#card_number,
body.edd-page #edd_cc_fields input#card_cvc,
body.edd-page #edd_cc_fields input#card_name,
body.checkout input#edd-discount {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 17px;
    width: 400px;
    padding: 6px 8px;
    border: 1px solid var(--border-gray-medium);
}

body.checkout #edd_checkout_user_info label,
body.checkout .edd-stripe-new-card label {
    margin-bottom: 5px;
}

body.checkout input#edd-discount {
    width: 200px;
}

body.checkout #edd-card-wrap {
    padding-bottom: 5px;
}

body.checkout #edd-card-wrap .edd-label {
    position: relative;
    top: -8px;
}

body.edd-page #edd_cc_fields #edd-stripe-card-element-wrapper {
    display: inline-block;
    width: 400px;
}

body.edd-page #edd_cc_fields #edd-stripe-card-element {
    font-size: 16px;
    width: 400px;
    padding: 6px 8px;
    border: 1px solid var(--border-gray-medium);
}

body.edd-page #edd_final_total_wrap {
    margin-bottom: 30px;
}

body.checkout #edd_checkout_login_register input#edd-first,
body.checkout #edd_checkout_login_register input#edd-last,
body.checkout #edd_checkout_user_info input#edd-first,
body.checkout #edd_checkout_user_info input#edd-last,
body.edd-page #edd_cc_fields input#card_cvc {
    width: 198px;
}

body.checkout #edd_checkout_login_register input#edd-last,
body.checkout #edd_checkout_user_info input#edd-last {
    width: 193px;
    margin-left: 6px;
}

body.checkout fieldset#edd_purchase_submit {
    text-align: center;
}

body.checkout #edd-user-login-submit input.edd-submit {
    margin-left: 204px;
}

body.page-id-23 table,
body.purchase-confirmation table {
    width: 100%;
}

/*==================================================
    Font icons
==================================================*/
[class^="icon-"],
[class*=" icon-"],
.main-content [class="scroll-link"]:after,
.main-content a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after,
.main .sidebar-left  a[target="_blank"][href^="https"]:not([href^="https://facetwp.com"]):after,
.hljs .hljs-ln-n:hover:before,
.hljs .hljs-ln-n.copied:before,
.main-content .code-badge-pre .infoblock a.moreinfo:after,
.hasinfoblock .code-badge .code-badge-language:after {
    font-family: 'icomoon' !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-twitter:before {
    content: "\e902";
}

.icon-search-solid:before {
    content: "\e903";
}

.icon-times-solid:before {
    content: "\e904";
}

.icon-user-solid:before {
    content: "\e900";
}

.icon-shopping-cart-solid:before {
    content: "\e901";
}

.icon-heart:before {
    content: "\e905";
}

.icon-exclamation-circle-solid:before {
    content: "\e906";
}

.icon-exclamation-triangle-solid:before {
    content: "\e907";
}

.icon-question-circle-regular:before {
    content: "\e908";
}

.icon-question-circle-solid:before {
    content: "\e909";
}

.icon-info-circle-solid:before {
    content: "\e90a";
}

.icon-check:before {
    content: "\e90b";
}

.icon-copy-solid:before {
    content: "\e90c";
}

.icon-copy:before {
    content: "\e90d";
}

.icon-angle-left:before {
    content: "\f104";
}

.icon-angle-right:before {
    content: "\f105";
}

.icon-angle-up:before {
    content: "\f106";
}

.icon-angle-down:before {
    content: "\f107";
}

.icon-angle-down-solid:before {
    content: "\e90e";
}

.icon-angle-up-solid:before {
    content: "\e90f";
}

.icon-angle-left-solid:before {
    content: "\e910";
}

.icon-angle-right-solid:before {
    content: "\e911";
}

.icon-chevron-left-solid:before {
    content: "\e912";
}

.icon-chevron-right-solid:before {
    content: "\e913";
}

.icon-chevron-up-solid:before {
    content: "\e914";
}

.icon-chevron-down-solid:before {
    content: "\e915";
}

.icon-check-circle-regular:before {
    content: "\e916";
}

.icon-check-circle-solid:before {
    content: "\e917";
}

.icon-paperclip:before {
    content: "\e918";
}

.icon-external-link:before {
    content: "\e919";
}

.icon-link:before {
    content: "\e91a";
}

.icon-minus-solid:before {
    content: "\e91b";
}

.icon-minus-square-regular:before {
    content: "\e91c";
}

.icon-minus-square-solid:before {
    content: "\e91d";
}

.icon-plus-solid:before {
    content: "\e91e";
}

.icon-plus-square-regular:before {
    content: "\e91f";
}

.icon-plus-square-solid:before {
    content: "\e920";
}

.icon-download-solid:before {
    content: "\e921";
}

.icon-cubes-solid:before {
    content: "\e922";
}

.icon-puzzle-piece-solid:before {
    content: "\e923";
}

.icon-times-circle-regular:before {
    content: "\e924";
}

.icon-times-circle-solid:before {
    content: "\e925";
}

.icon-arrow-up:before {
    content: "\e926";
}

.icon-gem-solid:before {
    content: "\e927";
}

.icon-gem-regular:before {
    content: "\e928";
}

.icon-refresh:before {
    content: "\e929";
}

.icon-asterisk:before {
    content: "\f069";
}

.icon-sort:before {
    content: "\f0dc";
}

/*==================================================
    Doc Search v3
==================================================*/
.docsearch {
    background: var(--bg-gray-light);
}

.docsearch .main {
    padding: 29px 30px 33px 30px;
}

.docsearch-wrap {
    text-align: center;
}

.docsearch-wrap h2 {
    font-size: 27px;
    margin: 0 0 17px 0;
}

.DocSearch-Container {
    background: rgba(var(--docsearch-bg), .9);
    z-index: 10000;
}

.docsearch-button-wrapper {
    position: relative;
    display: block;
    width: 720px;
    max-width: 100%;
    margin: 0 auto;
}

.DocSearch-Modal {
    background: var(--bg-gray-ultra-light);
    -webkit-box-shadow: 0px 0px 39px 8px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 39px 8px rgba(0,0,0,0.2);
    border-radius: 4px;
}

.DocSearch-Button {
    font-weight: normal;
    position: relative;
    width: 100%;
    height: 50px;
    margin-left: 0;
    padding: 0px 14px 0px 46px;
    color: var(--text-light);
    border: 1px solid var(--border-gray);
    border-radius: 3px;
    background: var(--white);
    box-shadow: none;
}

.DocSearch-Reset svg {
    color: var(--text-light);
}

.DocSearch-Reset:hover svg {
    color: var(--text-link-hover);
}

.DocSearch-Hit-source {
    font-family: 'Lato', Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0px;
    padding: 12px 12px 4px 12px;
}

.DocSearch-Button:active,
.DocSearch-Button:focus,
.DocSearch-Button:hover {
    color: var(--text-light);
    border-color: var(--bg-purple-dark);
    background: var(--white);
    box-shadow: none;
}

.DocSearch-Button-Placeholder {
    font-size: 18px;
    line-height: 50px;
    padding: 0;
}

.DocSearch-Search-Icon {
    display: none;
}

.DocSearch-Button:before,
.DocSearch-Form:before {
    font-family: 'icomoon' !important;
    font-size: 17px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    position: absolute;
    top: 16px;
    left: 16px;
    content: '\e903';
    text-transform: none;
    color: var(--text-purple-gray-light);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.DocSearch-LoadingIndicator {
    position: absolute;
    top: 18px;
    right: 50px;
    width: 16px;
    height: 16px;
}

.DocSearch-LoadingIndicator svg {
    display: block;
    width: 16px;
    height: 16px;
}

.DocSearch-Form:before {
    top: 18px;
    left: 12px;
}

.DocSearch-Button > span {
    align-self: center;
}

.DocSearch-Button-Keys {
    margin-left: auto;
}

@media (pointer: coarse) {
    .DocSearch-Button-Keys {
        display: none;
    }
}

.DocSearch-Button-Key,
.DocSearch-Commands-Key {
    font-size: 13px;
    line-height: 19px;
    position: relative;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-right: 0;
    margin-left: 4px;
    padding-bottom: 0px;
    color: var(--text-light);
    border: 1px solid var(--border-gray);
    border-radius: 3px;
    box-shadow: none;
}

.DocSearch-Commands-Key {
    margin-right: 2px;
}

.DocSearch-Label {
    display: inline-block;
    padding-left: 6px;
}

.DocSearch-Input {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 17px !important;
    padding-left: 30px;
    color: var(--text);
    background: var(--white);
    -webkit-appearance: none;
}

.DocSearch-Form {
    position: relative;
    border: 2px solid var(--bg-purple-dark);
    box-shadow: none;
}

.DocSearch-Hit {
    padding-bottom: 5px;
}

.DocSearch-Hit[aria-selected=true] a,
.DocSearch-Hit[aria-selected=true] a:hover {
    background: var(--bg-purple-dark);
}

.DocSearch-Hit a {
    box-shadow: none;
}

.DocSearch-Hit-icon svg {
    color: var(--text-light);
}

.DocSearch-Hit a:hover svg,
.DocSearch-Hit[aria-selected=true] a svg {
    color: var(--white);
}

.DocSearch-Hits mark {
    color: var(--text-link-current);
}

.DocSearch-Hit-title {
    font-size: 16px;
}

.DocSearch-Hit-action-button:focus,
.DocSearch-Hit-action-button:hover {
    background: var(--text-link-hover);
}

.DocSearch-HitsFooter {
    padding-top: 0;
    padding-bottom: 0;
}

.DocSearch-Footer {
    height: 46px;
    box-shadow: none;
}

/*==================================================
Accordion toggles
==================================================*/
.js .main-content .toggle-wrapper {
    overflow: hidden;
    max-height: 0px;
    -moz-transition: max-height 0.15s ease-in;
    -o-transition: max-height 0.15s ease-in;
    -webkit-transition: max-height 0.15s ease-in;
    transition: max-height 0.15s ease-in;
    /*transition: max-height 0.2s, opacity 0.15s 0.1s;*/
}

.js .main-content .toggle-wrapper .toggle-content {
    overflow: hidden;
}

.accordion-wrapper .toggle-title {
    cursor: pointer;
    color: var(--text-link);
}

.accordion-wrapper .toggle-title:hover {
    text-decoration: underline;
    text-underline-offset: .2rem;
    color: var(--text-link-hover);
}

.main-content .accordion-wrapper .toggle-wrapper {
    padding-left: 18px;
}

.main-content .accordion-wrapper .toggle-wrapper.open {
    margin-bottom: 6px;
}

.main-content .accordion-wrapper .toggle-wrapper {
    margin-left: 5px;
    border-left: 1px solid var(--border-gray);
}

.accordion-wrapper .toggle-content p,
.accordion-wrapper .toggle-content ul,
.accordion-wrapper .toggle-content ol {
    margin-bottom: 12px;
}

.main .accordion-wrapper .toggle-content li {
    margin-bottom: 7px;
}

.accordion-wrapper .toggle-title p {
    margin-bottom: 0px;
}

.accordion-wrapper .toggle-title {
    position: relative;
    display: inline-block;
    margin-bottom: 12px;
    padding-left: 24px;
}

.accordion-wrapper .toggle-title.active {
    color: var(--text-link-current);
}

.accordion-wrapper .toggle-title.active:hover {
    color: var(--text-link-hover);
}

.accordion-wrapper .toggle-title:before {
    font-family: 'icomoon' !important;
    font-size: 17px;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1.6em;
    position: absolute;
    top: 0px;
    left: 1px;
    content: '\f107';
    text-transform: none;
    color: var(--text-purple-gray-light);
    speak: never;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.accordion-wrapper .toggle-title.active:before {
    top: -1px;
    content: '\f106';
}

.accordion-wrapper .toggle-title:hover:before {
    color: var(--text-link-hover);
}

/*==================================================
    FAQ
==================================================*/
.faq .faqquestion {
    position: relative;
}

.faq .toggle-title {
    position: static;
    display: inline-block;
    margin-right: 40px;
}

.faq .toggle-wrapper {
    padding-left: 14px;
}

.main-content .faq a.heading-link {
    font-size: 11px;
    position: absolute;
    top: -0.1em;
    right: 0;
    display: block;
    padding: 0.6em 10px;
    cursor: pointer;
}

.faq .toggle-title.active a.heading-link {
    display: block;
}

.faq .toggle-title a.heading-link {
    transition: opacity 0.15s ease-in;
    /*display:none;*/
    opacity: 0;
}

.faq .col .toggle-title a.heading-link:hover {
    opacity: 1;
}

/*==================================================
    Buttons in forms and facet type demos
==================================================*/
.tutorials .main-content button.reset,
.tb-link {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    padding: 5px 12px 6px 12px;
    cursor: pointer;
    color: var(--white);
    border: 1px solid var(--text-link);
    border-radius: 3px;
    background: none;
    background-color: var(--text-link);
}

.tutorials .main-content button.reset:hover,
a.tb-link:hover {
    color: var(--white);
    border-color: var(--text-link-hover);
    background-color: var(--text-link-hover);
}

/*==================================================
    Tutorials
==================================================*/
.tutorials .facetwp-facet-blog_search {
    float: left;
}

.tutorials .main-content button.reset {
    margin: 4px 0 0 0px;
}

.tutorials .facetwp-template {
    clear: left;
    padding-top: 30px;
}

.tutorials .facetwp-template .fwpl-item {
    font-size: 17px;
    line-height: 1.45em;
}

.tutorials .facetwp-template .fwpl-item + .fwpl-item {
    font-size: 14px;
    margin-top: 2px;
}

.tutorials .facetwp-template .fwpl-item a {
    text-decoration: none;
}

.tutorials .facetwp-template .fwpl-item a:hover {
    text-decoration: underline;
}

.tutorials .facetwp-type-search {
    width: 450px;
    max-width: 100%;
    margin-right: 20px;
    margin-bottom: 10px;
}

.tutorials .facetwp-type-search .facetwp-input-wrap {
    width: 100%;
}

.tutorials .facetwp-type-search input {
    font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
    font-size: 16px;
    width: 100%;
    margin: 0;
    padding: 10px 32px 10px 15px;
    border: 1px solid var(--border-gray-medium);
}

.tutorials .facetwp-type-search .facetwp-icon {
    margin-right: 4px;
}

/*==================================================
    Right sidebar and header anchors
==================================================*/
.main-content > h1,
.main-content > h2,
.main-content > h3,
.main-content > h4,
.main-content > h5,
.main-content > h6,
.main-content > .banner > h2,
.main-content > .banner > h3,
.main-content > .banner > h4,
.main-content > .banner > h5,
.main-content > .banner > h6,
#changelog h2 {
    position: relative;
    padding-right: 40px;
    clear: both;
}

.main-content a.heading-link {
    font-size: 12px;
    position: absolute;
    top: 1px;
    right: 0px;
    padding: 0.8em 13px;
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    color: var(--text-purple-gray-ultra-light);
}

.main-content h3 a.heading-link {
    top: -0.05em;
}

.main-content h4 a.heading-link {
    top: -0.2em;
}

.main-content h5 a.heading-link {
    top: -0.3em;
}

.main-content h6 a.heading-link {
    top: -0.4em;
}

.main-content #changelog a.heading-link {
    top: -0.05em;
}

.main-content .faq h2 a.heading-link,
.main-content .faq h3 a.heading-link {
    top: -0.38em;
    opacity: 0;
}

.main-content .heading-anchor:hover a.heading-link {
    opacity: 1;
}

.main-content a.heading-link:hover {
    text-decoration: none;
    color: var(--text-link-hover);
}

.main-content a.heading-link.copied .icon:before {
    content: "\e90b";
    color: var(--bg-green);
}

/*==================================================
    fslightbox pro
==================================================*/

.fslightbox-container {
    font-family: inherit !important;
    background: rgba(var(--docsearch-bg), .9) !important;
}

.fslightbox-flex-centered .fslightbox-transform-transition {
    margin: 0 auto;
    max-width: 76%;
    border-radius: 3px;
    overflow: hidden;
}

.fslightbox-slide-btn,
.fslightbox-flex-centered .fslightbox-transform-transition,
.fslightbox-toolbar,
.fslightbox-slide-number-container,
.fslightbox-thumbs-active,
.fslightbox-caption {
    -webkit-box-shadow: 0px 0px 39px 8px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 39px 8px rgba(0,0,0,0.2);
}

.fslightbox-toolbar,
.fslightbox-slide-number-container {
    background: var(--bg-purple-ultra-dark) !important;
    color: var(--white) !important;
}

.fslightbox-toolbar-button[title="Turn off slideshow"] svg {
    margin-left: -4px;
}

.fslightbox-toolbar-button[title="Exit fullscreen"] svg{
    margin-left: -3px;
}

.fslightbox-svg-path {
    fill: #fff !important;
}

.fslightbox-slide-btn {
    background-color: var(--bg-purple-ultra-dark) !important;
    border-radius: 3px;
}

.fslightbox-toolbar,
.fslightbox-toolbar-button:first-child,
.fslightbox-container.single .fslightbox-toolbar-button:nth-child(2) {
    border-radius: 0 0 0 3px;
}

.fslightbox-slide-number-container {
    border-radius: 0 0 3px 0;
}

.fslightbox-slide-btn:hover,
.fslightbox-toolbar-button:hover,
.fslightbox-toolbar-button.active,
.fslightbox-toolbar-button[title="Turn off slideshow"],
.fslightbox-toolbar-button[title="Exit fullscreen"] {
    background-color: var(--text-link-hover) !important;
}

.fslightbox-slide-btn-container {
    padding: 30px 30px 30px 0px !important;
}

.fslightbox-slide-btn-container-next {
    padding: 30px 0px 30px 30px !important;
}

.fslightbox-source {
    margin: 0;
    display: block;
    height: auto !important; /* prevent distortion because padding */
}

.fslightbox-source[background="white"] {
    background: var(--white);
}

.fslightbox-source[padding] {
    padding: 15px;
}

.fslightbox-thumb {
    border-radius: 3px !important;
    border: 4px solid transparent !important;
}

body .fslightbox-thumb-active,
body .fslightbox-thumb:hover {
    border: 4px solid var(--text-link-hover) !important;
}

.fslightbox-caption {
    background: none !important;
    background: var(--bg-purple-ultra-dark) !important;
}

.fslightbox-caption-inner {
    font-size: 17px !important;
    line-height: 1.6em !important;
    padding: 20px 24px 24px 24px !important;
    text-align: left !important;
    color: var(--text-purple-gray-ultra-ultra-light) !important;
    max-width: 740px !important;
}

.fslightbox-thumbs {
    background: var(--bg-purple-ultra-dark) !important;
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    height: 120px !important;
}

.fslightbox-container.single .fslightbox-slide-btn-container,
.fslightbox-container.single .fslightbox-slide-number-container,
.fslightbox-container.single .fslightbox-toolbar-button:first-child,
.fslightbox-container.single .fslightbox-toolbar-button:nth-child(4) {
    display: none !important;
}

.fslightbox-container.single > .fslightbox-absoluted {
    pointer-events: none;
}

.fslightbox-container.single .fslightbox-flex-centered .fslightbox-transform-transition {
    max-width: 94%;
}

.fslightbox-slideshow-bar.fslightbox-opacity-1 {
    height: 4px !important;
    background: var(--text-link-hover) !important;
    opacity: 0.9 !important;
}

@media (min-width: 768px) {
    .fslightbox-slide-btn-container {
        padding: 30px 30px 30px 15px !important;
    }

    .fslightbox-slide-btn-container-next {
        padding: 30px 15px 30px 30px !important;
    }

    .fslightbox-slide-btn {
        padding: 12px !important;
    }

    .fslightbox-caption-inner {
        padding: 24px 30px 30px 30px !important;
        font-size: 16px !important;
    }
}

@media (min-height: 768px) {
    .fslightbox-flex-centered .fslightbox-transform-transition {
        transform: translateY(0) !important;
    }
}


/* end fslightbox*/


@media (max-width: 1320px) {
    .grid.col-20-60-20 {
        grid-template-columns: 290px 1fr 260px; /* if rightcolumn changes, change max-width: 710px below: 1360-80-290-280=710*/
    }

    .grid.col-25-75 .main-content,
    .grid.col-25-75 .main-content-header,
    body.page-template-page-faq .grid.col-25-75 .content {
        max-width: 710px;
    }
}

@media (max-width: 1200px) {
    .grid.col-25-75 .main-content,
    .grid.col-25-75 .main-content-header {
        width: auto;
    }

    .parent-help-center .main-content-wrapper .sidebar-right {
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .page-template-template-docs-addon .main-content-wrapper .sidebar-right {
        padding-top: 0px;
    }

    .grid.col-20-60-20 {
        grid-template-columns: 290px 1fr;
        grid-gap: 40px;
    }

    .parent-help-center .main-content-wrapper > div {
        grid-gap: 40px;
    }

    body .main > .grid.col-20-60-20 {
        grid-template-areas:
        'sidebarleft header'
        'sidebarleft sidebarright'
        'sidebarleft main';
        grid-template-rows: minmax(0, auto) minmax(0, auto) minmax(0, 1fr);
    }

    .page-template-template-docs-addon .add-on {
        margin-bottom: 0;
    }

    .page-template-template-docs-addon .main > .grid.col-20-60-20 .sidebar-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
    }

    /* override for map page because of very long sidebar */
    body.page-id-47067.page-template-template-docs-addon .main > .grid.col-20-60-20 .sidebar-right {
        grid-template-columns: 1fr;
    }

    .page-template-template-docs-addon .add-on .type {
        display: block;
    }

    .page-template-template-docs-addon .add-on-bubble {
        padding-top: 53px;
    }

    .page-template-template-docs-addon .main-content-header .type {
        display: none;
    }

    .grid.col-33-33-33.doc-bubbles {
        grid-template-columns: 1fr 1fr;
    }

    .sidebar-right-inner #tableofcontents li a.active {
        color: var(--text-link);
    }

    .sidebar-right-inner #tableofcontents li a.active:hover {
        color: var(--text-link-hover);
    }

    .page-template-template-docs-addon .add-on-bubble {
        padding-top: 42px;
        padding-bottom: 20px;
    }

    .page-template-template-docs-addon .add-on-bubble .image-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        text-align: left;
    }

    .page-template-template-docs-addon .add-on-bubble img {
        max-width: 25%;
        height: auto;
        margin: 0;
    }

    .page-template-template-docs-addon .add-on-bubble h3 {
        line-height: 1.25em;
        margin-left: 20px;
        padding-top: 0px;
    }

    .sidebar-right {
        margin-bottom: -10px;
    }

    .sidebar-right .sidebar-right-inner a.top-link {
        display: none;
    }

    .footer-cta {
        background-size: cover;
    }
}

@media (max-width: 1115px) {
    .main-nav ul > li {
        margin-left: 20px;
    }

    .main-nav .menu-item.help-center {
        margin-left: 54px;
    }

    .main-nav .menu-item.buy a {
        margin-right: 0;
    }

    .grid.col-50-50.faq {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 979px) {
    body.homepage .home-features {
        grid-template-columns: 1fr;
    }

    body.homepage .home-feature {
        margin: 0 30px;
        padding: 20px 0px 40px 0px;
        border-right: none;
    }

    .home-features .home-feature.bottom {
        border-bottom: 1px solid var(--border-gray);
    }

    body.homepage .home-feature h2,
    body.homepage .home-feature p {
        margin-right: 20px;
        margin-left: 20px;
    }

    body.cars .fwpl-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 959px) {
    .main,
    .main-middle,
    .main.main-wide {
        padding-right: 30px;
        padding-left: 30px;
    }

    .parent-help-center .main-content-wrapper {
        padding-right: 0;
        padding-left: 0;
    }

    .parent-help-center .main-content-wrapper > div {
        grid-column-gap: 30px;
    }

    .parent-help-center .main-content-wrapper:before {
        padding-left: 30px;
    }

    .parent-help-center .main-content-wrapper:after {
        padding-right: 30px;
    }

    .sidebar-left {
        padding-right: 10px;
    }

    .breadcrumbs-bar {
        padding-left: 0px;
    }

    .side-nav {
        display: block;
    }

    .main-nav > ul > li,
    .main-nav .menu-item-has-children {
        display: none;
    }

    .main-nav > ul > li.menu-item.menu {
        display: inline-block;
    }

    .tutorials .facetwp-type-search {
        width: 100%;
    }
}

@media (max-width: 935px) {
    .grid.col-33-33-33.doc-bubbles {
        grid-template-columns: 1fr;
    }

    .page-template-template-docs-addon .main > .grid.col-20-60-20 .sidebar-right {
        grid-template-columns: 1fr;
    }

    body.add-ons .home-features {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 779px) {
    .main,
    .main-wide {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .parent-help-center .main-content-wrapper:before {
        background: none;
    }

    h1,
    .footer-cta .cta-text {
        font-size: 40px;
    }

    .grid.col-50-50,
    .grid.col-66-33,
    .grid.col-33-66,
    .grid.col-75-25,
    .grid.col-25-75,
    .grid.col-33-33-33,
    .grid.col-20-60-20,
    body.homepage .home-splash,
    body.homepage .home-features,
    body.features .feature-row.split,
    body.showcase .fwpl-layout {
        grid-template-columns: 1fr;
    }

    .main > .grid {
        grid-template-areas:
            'main';
    }

    body.parent-add-ons .main > .grid,
    body.parent-help-center .main > .grid,
    body.single-post .main > .grid {
        grid-template-areas:
            'header'
            'main'
            'sidebarleft';
    }

    body.page-template-page-helpcenter-home .main > .grid {
        grid-template-areas:
            'main'
            'sidebarleft';
    }

    body .main > .grid.col-20-60-20 {
        grid-template-areas:
        'header'
        'sidebarright'
        'main'
        'sidebarleft';
    }

    body .main > .grid.col-20-60-20.onlyrelated {
        grid-template-areas:
        'header'
        'main'
        'sidebarleft';
    }

    body .main > .grid.col-75-25 {
        grid-template-areas:
        'main'
        'sidebarright';
    }

    .sidebar-left {
        margin-right: -30px;
        margin-left: -30px;
        padding-right: 30px;
        padding-left: 30px;
    }

    body.page-template-page-helpcenter-home .faq {
        margin-bottom: 0;
    }

    body.features h3 {
        margin-top: 0;
    }

    body.features .feature-row img {
        max-width: 100% !important;
    }

    body.features .feature-row.split img {
        padding-top: 40px;
    }

    body.add-ons .home-feature {
        padding: 40px 0;
        border: none;
    }

    body.homepage .topnav {
        padding-bottom: 20px;
    }

    body.homepage .splash-left {
        max-width: 500px;
        margin: 0 auto;
        padding: 15px 0 45px 0;
    }

    .splash-left p {
        margin: 0px 0px 18px 0px;
    }

    body.homepage .splash-right img {
        left: 0;
        width: 100%;
    }

    body.features .features-splash {
        width: 100%;
    }

    body.features .img-wysiwyg,
    body.features .img-widget {
        display: none;
    }

    body.features .grid > div {
        margin-bottom: 40px;
    }

    body.features .grid > div:last-child {
        margin-bottom: 10px;
    }

    body.checkout #edd_purchase_form_wrap label {
        display: block;
    }

    button.facetwp-flyout-open {
        display: inline-block;
    }

    .facet-wrap {
        display: none;
    }

    .grid.col-33-33-33.doc-bubbles {
        grid-template-columns: 1fr 1fr;
        grid-gap: 30px;
    }

    body.page-id-5951 .buy-pricing {
        margin-bottom: 20px;
    }

    body.page-id-5951 .buy-pricing:last-child {
        margin-bottom: 0px;
    }

    body.page-id-5951 .buy-reviews h2,
    body.page-id-5951 .buy-faq h2 {
        text-align: left;
    }

    body.checkout #edd-card-wrap .edd-label {
        top: 0px;
    }

    .main .sidebar-right-inner .toc-wrapper li.related {
        display: block;
    }

    .sidebar-right-inner .related-wrapper {
        display: none;
    }

    .sidebar-right.onlyrelated {
        display: none;
    }

    .page-template-template-docs-addon .main > .grid.col-20-60-20 .sidebar-right {
        grid-template-columns: 1fr 1fr;
    }

    /* Docsearch v3 */
    .docsearch .main {
        padding: 30px 30px 24px 30px;
    }

    .docsearch-wrap h2 {
        display: none;
    }

    .docsearch .troubleshooter {
        margin-top: 18px;
    }

    .DocSearch-Button-Keys {
        display: none;
    }

    .DocSearch-Button-Placeholder {
        display: none;
    }

    .DocSearch-Button-Container:before {
        font-size: 18px;
        line-height: 49px;
        position: absolute;
        top: 0px;
        left: 46px;
        display: inline-block;
        content: "Search the Help Center ...";
        white-space: nowrap;
        color: var(--text-light);
    }

    .breadcrumbs {
        padding: 0 0 0 0px;
    }

    .add-on-bubble h3 {
        font-size: 20px;
    }

    .main-content-header .type {
        margin-top: 9px;
    }
}

@media (max-width: 600px) {
    .grid.col-33-33-33.doc-bubbles,
    .grid.col-50-50.faq {
        grid-template-columns: 1fr;
    }

    body.add-ons .home-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .page-template-template-docs-addon .main > .grid.col-20-60-20 .sidebar-right {
        grid-template-columns: 1fr;
    }

    .add-on-bubble h3 {
        font-size: 22px;
    }
}

@media (max-width: 479px) {
    .home-btn,
    .splash-left .home-btn,
    .footer-cta .home-btn {
        display: block;
        width: auto;
    }

    body.homepage .splash-left h1 {
        font-size: 32px;
    }

    .home-btn.button-buy {
        margin: 16px 0 0 0;
    }

    .footer a {
        margin-right: 15px;
    }

    .footer a:last-child {
        margin-right: 0;
    }

    body.checkout #edd_checkout_login_register input,
    body.checkout #edd_checkout_user_info input,
    body.edd-page #edd_cc_fields input#card_number,
    body.edd-page #edd_cc_fields input#card_cvc,
    body.edd-page #edd_cc_fields input#card_name,
    body.checkout input#edd-discount {
        width: 100%;
    }

    body.checkout input#edd-discount {
        width: 50%;
    }

    body.edd-page #edd_cc_fields #edd-stripe-card-element-wrapper {
        width: 100%;
    }

    body.edd-page #edd_cc_fields #edd-stripe-card-element {
        width: 100%;
    }

    body.checkout #edd_checkout_login_register input#edd-first,
    body.checkout #edd_checkout_login_register input#edd-last,
    body.checkout #edd_checkout_user_info input#edd-first,
    body.checkout #edd_checkout_user_info input#edd-last,
    body.edd-page #edd_cc_fields input#card_cvc {
        width: 100%;
    }

    body.checkout #edd_checkout_login_register input#edd-last,
    body.checkout #edd_checkout_user_info input#edd-last {
        width: 100%;
        margin-top: 6px;
        margin-left: 0;
    }

    body.checkout #edd-user-login-submit input.edd-submit {
        margin-left: 100%;
    }

    .main-content-header h1 {
        font-size: 36px;
        line-height: 1.3;
    }

    .main-content img.alignright,
    .main-content figure.alignright {
        float: none;
        max-width: 100%;
        margin: 0 0 0 0;
    }

    .main-content img.alignleft,
    .main-content figure.alignleft {
        float: none;
        max-width: 100%;
        margin: 0 0 0 0;
    }

    .main .main-content ul.col-2,
    .main .main-content ol.col-2 {
        -webkit-columns: unset;
        -moz-columns: unset;
        columns: unset;
    }
}