/*!
Theme Name: PerfectXL Theme
Theme URI: http://underscores.me/
Author: whello dev
Author URI: http://whello.id
Description: Theme for PerfectXL
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: perfectdesign
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/


@font-face {
    font-family: 'Heebo';
    src: local('Heebo Thin'), local('Heebo-Thin'),
        url('assets/fonts/Heebo-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: local('Heebo Light'), local('Heebo-Light'),
        url('assets/fonts/Heebo-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: local('Heebo Regular'), local('Heebo-Regular'),
        url('assets/fonts/Heebo-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Heebo';
    src: local('Heebo Medium'), local('Heebo-Medium'),
        url('assets/fonts/Heebo-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'assets/fonts/Heebo';
    src: local('Heebo Bold'), local('Heebo-Bold'),
        url('assets/fonts/Heebo-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
	margin: 0;
	padding: 0;
	outline: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-webkit-backface-visibility: hidden;
	text-shadow: rgb(0, 0, 0, .01) 0 0 1px;
	vertical-align: baseline;
	background-clip: border-box;
	word-break: break-word;
}


/* ==========================================================================
   DESIGN TOKENS
   Single source of truth. Change a value here, it changes everywhere.
   Do not type a hex value or a px font-size anywhere else in this theme.
   ========================================================================== */

:root {

	/* --- brand ---------------------------------------------------------- */
	--pxl-green:        #42756e;   /* primary. backgrounds, key sections */
	--pxl-green-deep:   #2f5751;   /* hover on green surfaces */
	--pxl-green-tint:   #F5F9F9;   /* THE light greyish green. One value for
	                                  every tinted band on the site, taken
	                                  from the mockup. */
	--pxl-green-line:   #d6e6e2;

	--pxl-teal:         #5DA79C;   /* ACCENT ONLY, never a background. Ties
	                                  type to the illustrations, which carry
	                                  this colour. Was accidentally rewritten
	                                  to var(--pxl-green) by the bulk hex
	                                  swap, so eyebrows lost their accent. */
	--pxl-orange:       #fd6049;   /* accent. primary CTA */
	--pxl-orange-deep:  #e04630;
	--pxl-orange-tint:  #fff1ee;
	--pxl-yellow:       #ffc857;   /* accent only. pills, on-dark highlights */

	--pxl-dark:         #353c41;   /* the dark side of the logo */
	--pxl-dark-deep:    #272d31;

	/* --- neutrals ------------------------------------------------------- */
	--pxl-ink:          #22292c;   /* headings */
	--pxl-body:         #5c6a6e;   /* body copy */
	--pxl-muted:        #879497;   /* captions, meta */
	--pxl-line:         #eaf0ef;   /* card border at rest — deliberately light */
	--pxl-line-hover:   #cfe0dd;   /* one gentle step darker on hover */
	--pxl-well:         #f2f7f6;
	--pxl-off:          #fafbfb;

	--pxl-on-dark:      #ffffff;
	--pxl-on-dark-soft: rgba(255,255,255,.78);
	--pxl-on-dark-line: rgba(255,255,255,.22);

	/* --- weight ---------------------------------------------------------
	   Light hero, bold section headings. Weight carries the hierarchy so
	   the sizes do not have to be enormous.
	   -------------------------------------------------------------------- */
	/* ONLY 100, 300, 400, 500 and 700 are loaded as @font-face above.
	   There is NO 600. Any 600 in this file was being rounded up to Bold 700
	   by the browser, which is why headings and buttons read heavy. Use only
	   the five real weights below. */
	--pxl-weight-display: 300;   /* h1 */
	--pxl-weight-h2:      400;   /* h2 */
	--pxl-weight-heading: 500;   /* h3 and card titles */
	--pxl-weight-sub:     500;   /* h4 and h5 */
	--pxl-weight-eyebrow: 400;   /* h6 eyebrow */
	--pxl-weight-body:    500;   /* body copy */
	--pxl-weight-strong:  700;   /* <strong> inside 500 body needs 700 */
	--pxl-weight-button:  500;   /* buttons */

	/* --- type scale -----------------------------------------------------
	   Fluid. These replace the heading rules that lived in responsive.css.
	   Ratio between levels is ~1.4, so h1 and h2 no longer compete.
	   -------------------------------------------------------------------- */
	--pxl-display: clamp(2.375rem, 1.55rem + 3.4vw, 3.750rem);  /* 38 - 60 hero */
	--pxl-h1:      clamp(2.000rem, 1.55rem + 1.9vw, 2.875rem);  /* 32 - 46 */
	--pxl-h2:      clamp(1.750rem, 1.45rem + 1.3vw, 2.375rem);  /* 28 - 38 */
	--pxl-h2-lg:   clamp(1.875rem, 1.45rem + 1.8vw, 2.625rem);  /* 30 - 42 */
	--pxl-h3:      clamp(1.375rem, 1.24rem + 0.6vw, 1.688rem);  /* 22 - 27 */
	--pxl-h4:      1.250rem;   /* 20 */
	--pxl-h5:      1.063rem;   /* 17 */
	--pxl-h6:      0.938rem;   /* 15, an eyebrow label not a heading */

	--pxl-lede:    clamp(1.063rem, 1.00rem + 0.35vw, 1.188rem);  /* 17 - 19 */
	--pxl-text:    1rem;       /* 16, body */
	--pxl-prose:   1.063rem;   /* 17, long-form: Academy and blog */
	--pxl-small:   0.938rem;   /* 15 */
	--pxl-xs:      0.813rem;   /* 13 */

	--pxl-lh-display: 1.05;
	--pxl-lh-heading: 1.18;
	--pxl-lh-tight:   1.30;
	--pxl-lh-text:    1.60;
	--pxl-lh-prose:   1.70;

	--pxl-track-display: -0.028em;
	--pxl-track-heading: -0.020em;
	--pxl-track-label:    0.140em;

	--pxl-measure:       36em;
	--pxl-measure-prose: 42em;

	/* --- shape and depth ------------------------------------------------ */
	--pxl-radius-sm:   10px;
	--pxl-radius:      14px;
	--pxl-radius-lg:   18px;
	--pxl-radius-pill: 999px;

	--pxl-shadow-sm:   0 2px 8px rgba(34,41,44,.05);
	--pxl-shadow:      0 14px 30px rgba(34,41,44,.08);
	--pxl-shadow-lg:   0 26px 60px rgba(34,41,44,.12);
	--pxl-shadow-pop:  0 14px 28px rgba(34,41,44,.18);

	/* --- space ----------------------------------------------------------- */
	--pxl-section-y: clamp(56px, 6.5vw, 100px);
	--pxl-gutter:    clamp(20px, 4vw, 40px);
	--pxl-gap:       20px;
	--pxl-gap-lg:    clamp(32px, 4vw, 64px);
	--pxl-wrap:      1280px;

	--pxl-ease: cubic-bezier(.22,.61,.36,1);
}

html, body {
	scroll-behavior: smooth;
	width: 100%;
	/* overflow-x: hidden; */
}

.scroll-deactive {
	overflow: hidden;
}

body {
	margin: 0;
	font-family: Heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	color: var(--pxl-body);
	line-height: var(--pxl-lh-text);
	font-size: var(--pxl-text);
	font-weight: var(--pxl-weight-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	background-color: #fff;
    word-break: break-word;
}

#primary {
	position: relative;
}

mark {
	background-color: rgb(253, 203, 110);
	color: inherit;
	padding: 2px 5px }

time {
    font-family: Heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 14px;
    color: #fd6049;
    margin-bottom: 10px;
    display: block;
}

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

ol, ul {
	margin: 0;
	padding: 0; }

li {
	width: 100%;
}

.site-content li {
	margin-left: 20px;
}

.site-content p ~ ol {
	list-style: decimal;
	padding-left: 20px;
	line-height: 1.75;
}

.site-content p ~ ul,
.site-content .wpb_text_column ul {
	line-height: 1.75;
	margin-top: 20px;
    list-style: disc;
}

.stats_2 p {
	color: #50505A !important;
}

.stats_3 p {
	color: var(--pxl-orange) !important;
}

.stats_4 p {
	color: #B70A00 !important;
}


/* Bullet lists use the designer's checkmark SVG via li:before. The URLs
   above are now relative to this stylesheet rather than hardcoded to
   /themes/perfectxl/, which is why the checkmarks had disappeared: the live
   theme folder is perfectxl3, so every one of those URLs was 404ing. */
[class*="list-bullet"] ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    margin-bottom: 6px;
    padding-right: 10px;
    margin-left: 0;
}

[class*="list-bullet"] ul li:before {
	content: '';
	display: block;
	min-width: 21px;
	min-height: 15px;
	margin-top: 5px;
    margin-right: 15px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

[class*="list-bullet"] ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
}

.list-bullet-greencheck ul li:before {
	background: url(assets/images/icon-checkmark-green-perfectxl.svg) center/contain no-repeat;
}

.list-bullet-whitecheck ul li:before {
	background: url(assets/images/icon-checkmark-white-perfectxl.svg) center/contain no-repeat;
}

a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color .18s var(--pxl-ease);
}

/* The theme had no focus style at all, which is an accessibility failure
   for keyboard users and a fail on any procurement security review. */
:focus-visible {
	outline: 2px solid var(--pxl-green);
	outline-offset: 3px;
	border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

a * {
	cursor: pointer;
	cursor: hand }

/* Headings. The old scale put h1 and h2 only 1.17x apart and set every
   level to weight 300, so nothing had authority over anything else. The
   ratio is now ~1.4 and weight does the rest of the work. */

h1, h2, h3, h4, h5, h6 {
	font-family: inherit;
	color: var(--pxl-ink);
	text-wrap: balance;
}

h1 {
	font-size: var(--pxl-h1);
	line-height: var(--pxl-lh-display);
	font-weight: var(--pxl-weight-display);
	letter-spacing: var(--pxl-track-display);
	margin-bottom: 22px;
}

h2 {
	font-size: var(--pxl-h2);
	line-height: var(--pxl-lh-heading);
	font-weight: var(--pxl-weight-h2);
	letter-spacing: var(--pxl-track-heading);
	margin-bottom: 18px;
}

h3 {
	font-size: var(--pxl-h3);
	line-height: 1.25;
	font-weight: var(--pxl-weight-heading);
	letter-spacing: -0.015em;
	margin-bottom: 14px;
}

h4 {
	font-size: var(--pxl-h4);
	line-height: var(--pxl-lh-tight);
	font-weight: var(--pxl-weight-sub);
	letter-spacing: -0.01em;
	margin-bottom: 12px;
}

h5 {
	font-size: var(--pxl-h5);
	line-height: var(--pxl-lh-tight);
	font-weight: var(--pxl-weight-sub);
	margin-bottom: 10px;
}

/* h6 is an EYEBROW: all caps, thin, orange. Teal via .pxl-eyebrow--teal.
   This is a deliberate design decision, not a workaround. Where h6 is
   currently used for running copy (Excel Principles), that is a heading
   hierarchy problem in the page and should be fixed in the page. */
h6, .pxl-eyebrow {
	display: block;
	font-size: var(--pxl-h6);
	line-height: 1.4;
	font-weight: var(--pxl-weight-eyebrow);
	letter-spacing: var(--pxl-track-label);
	text-transform: uppercase;
	color: var(--pxl-orange);
	margin-bottom: 12px;
}

h6.pxl-eyebrow--teal,  .pxl-eyebrow--teal  { color: var(--pxl-teal); }
h6.pxl-eyebrow--green, .pxl-eyebrow--green { color: var(--pxl-green); }
h6.pxl-eyebrow--muted, .pxl-eyebrow--muted { color: var(--pxl-muted); }
h6.pxl-eyebrow--ink,   .pxl-eyebrow--ink   { color: var(--pxl-ink); }

/* An eyebrow immediately above a heading sits tight to it. */
h6 + :is(h1, h2, h3, .pxl-display) { margin-top: -4px; }

:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

/* Hero titles opt in to the display size. Never put this on an article
   title, only on an h1 inside a hero. */
.pxl-display {
	font-size: var(--pxl-display);
	line-height: var(--pxl-lh-display);
	font-weight: var(--pxl-weight-display);
	letter-spacing: var(--pxl-track-display);
}

/* Marketing sections that want more presence than an article h2. */
.pxl-h2--lg { font-size: var(--pxl-h2-lg); }

/* Eyebrow colour variants. Teal is the default and reads as structural.
   Orange reads as promotional and pulls harder, so use it above a CTA or
   a commercial section, not above every heading on the page. */
.pxl-eyebrow--teal   { color: var(--pxl-teal); }
.pxl-eyebrow--orange { color: var(--pxl-orange); }
.pxl-eyebrow--green  { color: var(--pxl-green); }
.pxl-eyebrow--muted  { color: var(--pxl-muted); }

p {
	margin-top: 0;
	line-height: var(--pxl-lh-text);
	text-wrap: pretty;
}

.pxl-lede {
	font-size: var(--pxl-lede);
	line-height: 1.5;
	color: var(--pxl-ink);
	max-width: 32em;
}

/* Deliberately no colour here. Setting one on <strong> overrides the
   inherited white on every green and dark surface, which turned the
   industry card titles black on green. Weight only. */
strong, b {
	font-weight: var(--pxl-weight-strong);
}

p strong, p b,
span strong, span b,
li strong, li b, h1 strong {
	font-weight: 500;
}

.title-black-gray-line h1,
.title-black-gray-line h2,
.title-black-gray-line h3,
.title-black-gray-line h4,
.title-black-gray-line h5,
.title-black-gray-line h6 {
    color: #c4c4c4;
}

.title-black-gray-line h1 strong,
.title-black-gray-line h2 strong,
.title-black-gray-line h3 strong,
.title-black-gray-line h4 strong,
.title-black-gray-line h5 strong,
.title-black-gray-line h6 strong {
    color: var(--pxl-dark);
    font-weight: 400;
}

/* HIGH-RISK EDIT, read before deploying.
   The old rule forced every image on the site to width:100% with
   object-fit:cover, and set pointer-events:none so no image anywhere could
   be clicked or linked. That is the single most outdated rule in the file.
   max-width lets images render at their natural size instead of being
   stretched, and pointer-events is restored so linked images work.
   Check logo rows, icon grids and inline content images on preview. */
img {
	max-width: 100%;
	height: auto;
	object-position: center;
}

/* Opt back in to the old behaviour where a layout depends on it. */
.img-fill {
	width: 100%;
	object-fit: cover;
}

p img,
p .alt-image {
	width: 100%;
	margin-top: 16px;
}

.alt-image {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
	overflow: hidden;
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

.alt-objectfit-contain .alt-image {
	-webkit-background-size: contain;
	   -moz-background-size: contain;
	     -o-background-size: contain;
	        background-size: contain;
}

.grw-slider > .alt-image {
	display: none;
}

.alt-image.emoji {
	display: inline-block;
}

::-webkit-input-placeholder {
	color: #b3b3b3;
	opacity: 1;
}

:-moz-placeholder {
	color: #b3b3b3;
	opacity: 1;
}

::-moz-placeholder {
	color: #b3b3b3;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #b3b3b3;
	opacity: 1;
}

::-ms-input-placeholder {
	color: #b3b3b3;
	opacity: 1;
}

::placeholder {
	color: #b3b3b3;
	opacity: 1;
}

:-ms-input-placeholder {
	color: #b3b3b3;
}

::-ms-input-placeholder {
	color: #b3b3b3;
}

select::-ms-expand {
    display: none;
}

input[type="file"]::-ms-value,
input[type="file"]::-ms-browse {
	display: none;
} 

button, input, textarea, select {
	font-family: Heebo, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-moz-transition: .2s;
	transition: .2s
}

input:not([type=submit]):not([type=radio]):not([type=checkbox]), textarea, select {
	padding: 11px 35px 11px 20px;
	border: 2px solid rgba(0,0,0,0);
	caret-color: #000;
	font-size: 20px;
	background-color: #f0f5f6;
}

select {
	word-wrap: normal;
	-webkit-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

select option {
	background-color: rgba(235, 241, 243, 0.75);
	color: var(--pxl-dark);
}

textarea {
	height: 140px;
	resize: none;
	overflow: auto;
}

textarea::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 2px;
	        border-radius: 2px;
	background-color: #a0a1b5;
}

textarea::-webkit-scrollbar
{
	width: 7px;
	background-color: #a0a1b5;
}

textarea::-webkit-scrollbar-thumb
{
	-webkit-border-radius: 2px;
	        border-radius: 2px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #a0a1b5;
}

input:not([type=submit]):not([type=radio]):not([type=checkbox]):active,
input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus,
input:not([type=submit]):not([type=radio]):not([type=checkbox]):hover,
textarea:active, textarea:focus, textarea:hover,
select:active, select:focus, select:hover {
	border-color: var(--pxl-green-line);
	outline: none; }

.input-field input.wpcf7-form-control.error,
.input-field textarea.wpcf7-form-control.error {
    border-color: var(--pxl-orange);
}

.wpcf7-form label.error {
	display: none !important;
}

input[type=search]::-ms-clear {
	display: none;
	width : 0;
	height: 0 }

input[type=search]::-ms-reveal {
	display: none;
	width : 0;
	height: 0 }

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


/* STYLE CTA */
button, input[type=submit], input[type=reset], input[type=button] {
	border: 0;
	overflow: visible;
	-webkit-box-shadow: none;
		-moz-box-shadow: none;
	     box-shadow: none;
	-webkit-appearance: button }

div.vc_btn3-container {
	margin-bottom: 0;
}

.vc_btn3-container a.vc_btn3:focus {
	background-color: rgba(0,0,0,0);
}

a[class*="btn-"], button[class*="btn-"], [class*="btn-"] button,
[class*="btn-"] a, .vc_btn3-container[class*="btn-flat-"] a.vc_btn3,
input[type=submit][class*="btn-"], [class*="btn-"] input[type=submit],
input[type=reset][class*="btn-"], [class*="btn-"] input[type=reset],
input[type=button][class*="btn-"], [class*="btn-"] input[type=button] {
	/* Was font-size:20px and border-radius:0. That rule squared off every
	   button whose wrapper class contained "btn-", including the Contact
	   Form 7 submit, and outranked the component layer below. */
	line-height: 1;
	transition: .3s;
}

a[class*="btn-arrow"], .vc_btn3-container[class*="btn-arrow"] a.vc_btn3,
button[class*="btn-arrow"], [class*="btn-arrow"] button,
[class*="text-anchor-arrow"] a {
	font-size: 20px;
	font-weight: 500;
	padding: 0;
	color: var(--pxl-dark);
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

a[class*="red"], .vc_btn3-container[class*="red"] a.vc_btn3,
button[class*="red"], [class*="red"] > button, [class*="red"] > a,
input[type=submit][class*="red"], [class*="red"] > input[type=submit],
input[type=reset][class*="red"], [class*="red"] > input[type=reset],
input[type=button][class*="red"], [class*="red"] > input[type=button] {
	color: #fd6049;
}

a[class*="green"], .vc_btn3-container[class*="green"] a.vc_btn3,
button[class*="green"], [class*="green"] > button, [class*="green"] > a,
input[type=submit][class*="green"], [class*="green"] > input[type=submit],
input[type=reset][class*="green"], [class*="green"] > input[type=reset],
input[type=button][class*="green"], [class*="green"] > input[type=button] {
	color: #39AA9C;
}

a[class*="btn-flat-"], button[class*="btn-flat-"], [class*="btn-flat-"] button,
[class*="btn-flat-"] a, .vc_btn3-container[class*="btn-flat-"] a.vc_btn3,
input[type=submit][class*="btn-flat-"], [class*="btn-flat-"] input[type=submit],
input[type=reset][class*="btn-flat-"], [class*="btn-flat-"] input[type=reset],
input[type=button][class*="btn-flat-"], [class*="btn-flat-"] input[type=button] {
	padding: 15px 25px;
	color: #fff;
}

a[class*="btn-arrow"]:before, .vc_btn3-container[class*="btn-arrow"] a.vc_btn3:before,
button[class*="btn-arrow"]:before, [class*="btn-arrow"] button:before,
[class*="text-anchor-arrow"] a:before {
	content: '';
	display: inline-block;
	margin-right: 8px;
	background-position: center right;
	-webkit-background-size: contain;
	   -moz-background-size: contain;
	     -o-background-size: contain;
	        background-size: contain;
	background-repeat: no-repeat;
	-webkit-transform: translateZ(0);
	-webkit-transform: translateX(0);
	   -moz-transform: translateX(0);
	    -ms-transform: translateX(0);
	     -o-transform: translateX(0);
	        transform: translateX(0);
	-webkit-transition: .3s;
	-o-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
}

a[class*="btn-arrow"]:hover:before, .vc_btn3-container[class*="btn-arrow"] a.vc_btn3:hover:before,
button[class*="btn-arrow"]:hover:before, [class*="btn-arrow"] button:hover:before,
[class*="text-anchor-arrow"] a:hover:before {
	-webkit-transform: translateX(3px);
	   -moz-transform: translateX(3px);
	    -ms-transform: translateX(3px);
	     -o-transform: translateX(3px);
	        transform: translateX(3px);
}

a.btn-arrow-chevronred:before, .vc_btn3-container.btn-arrow-chevronred a.vc_btn3:before,
button.btn-arrow-chevronred:before, .btn-arrow-chevronred button:before {
	min-width: 10px;
    min-height: 18px;
    margin-bottom: 2px;
	background-image: url(assets/images/icon-chevronred-right-perfectxl.svg);
}

input[type=submit].btn-arrow-chevronred, .btn-arrow-chevronred input[type=submit],
input[type=reset].btn-arrow-chevronred, .btn-arrow-chevronred input[type=reset],
input[type=button].btn-arrow-chevronred, .btn-arrow-chevronred input[type=button] {
	background: url(assets/images/icon-chevronred-right-perfectxl.svg) -webkit-calc(100% - 12px) center/10px 18px no-repeat;
	background: url(assets/images/icon-chevronred-right-perfectxl.svg) -moz-calc(100% - 12px) center/10px 18px no-repeat;
	background: url(assets/images/icon-chevronred-right-perfectxl.svg) -calc(100% - 12px) center/10px 18px no-repeat;
}

a.btn-arrow-chevrongreen:before, .vc_btn3-container.btn-arrow-chevrongreen a.vc_btn3:before,
button.btn-arrow-chevrongreen:before, .btn-arrow-chevrongreen button:before {
	min-width: 10px;
    min-height: 18px;
    margin-bottom: 2px;
	background-image: url(assets/images/icon-chevrongreen-right-perfectxl.svg);
}

input[type=submit].btn-arrow-chevrongreen, .btn-arrow-chevrongreen input[type=submit],
input[type=reset].btn-arrow-chevrongreen, .btn-arrow-chevrongreen input[type=reset],
input[type=button].btn-arrow-chevrongreen, .btn-arrow-chevrongreen input[type=button] {
	background: url(assets/images/icon-chevrongreen-right-perfectxl.svg) -webkit-calc(100% - 12px) center/10px 18px no-repeat;
	background: url(assets/images/icon-chevrongreen-right-perfectxl.svg) -moz-calc(100% - 12px) center/10px 18px no-repeat;
	background: url(assets/images/icon-chevrongreen-right-perfectxl.svg) -calc(100% - 12px) center/10px 18px no-repeat;
}

a.btn-arrow-mailgreen:before, .vc_btn3-container.btn-arrow-mailgreen a.vc_btn3:before,
button.btn-arrow-mailgreen:before, .btn-arrow-mailgreen button:before {
	min-width: 40px;
    min-height: 40px;
    margin-right: 15px;
	background-image: url(assets/images/icon-mailgreen-perfectxl.svg);
}

input[type=submit].btn-arrow-mailgreen, .btn-arrow-mailgreen input[type=submit],
input[type=reset].btn-arrow-mailgreen, .btn-arrow-mailgreen input[type=reset],
input[type=button].btn-arrow-mailgreen, .btn-arrow-mailgreen input[type=button] {
	background: url(assets/images/icon-mailgreen-perfectxl.svg) -webkit-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-mailgreen-perfectxl.svg) -moz-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-mailgreen-perfectxl.svg) calc(100% - 40px) center/40px no-repeat;
}

a.btn-arrow-telgreen:before, .vc_btn3-container.btn-arrow-telgreen a.vc_btn3:before,
button.btn-arrow-telgreen:before, .btn-arrow-telgreen button:before {
	min-width: 40px;
    min-height: 40px;
    margin-right: 15px;
	background-image: url(assets/images/icon-telgreen-perfectxl.svg);
}

input[type=submit].btn-arrow-telgreen, .btn-arrow-telgreen input[type=submit],
input[type=reset].btn-arrow-telgreen, .btn-arrow-telgreen input[type=reset],
input[type=button].btn-arrow-telgreen, .btn-arrow-telgreen input[type=button] {
	background: url(assets/images/icon-telgreen-perfectxl.svg) -webkit-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-telgreen-perfectxl.svg) -moz-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-telgreen-perfectxl.svg) calc(100% - 40px) center/40px no-repeat;
}

a.btn-arrow-wagreen:before, .vc_btn3-container.btn-arrow-wagreen a.vc_btn3:before,
button.btn-arrow-wagreen:before, .btn-arrow-wagreen button:before {
	min-width: 40px;
    min-height: 40px;
    margin-right: 15px;
	background-image: url(assets/images/icon-wagreen-perfectxl.svg);
}

input[type=submit].btn-arrow-wagreen, .btn-arrow-wagreen input[type=submit],
input[type=reset].btn-arrow-wagreen, .btn-arrow-wagreen input[type=reset],
input[type=button].btn-arrow-wagreen, .btn-arrow-wagreen input[type=button] {
	background: url(assets/images/icon-wagreen-perfectxl.svg) -webkit-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-wagreen-perfectxl.svg) -moz-calc(100% - 40px) center/40px no-repeat;
	background: url(assets/images/icon-wagreen-perfectxl.svg) calc(100% - 40px) center/40px no-repeat;
}

a.btn-arrow-chevronlarge, .vc_btn3-container.btn-arrow-chevronlarge a.vc_btn3,
button.btn-arrow-chevronlarge, .btn-arrow-chevronlarge button,
input[type=submit].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=submit],
input[type=reset].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=reset],
input[type=button].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=button] {
	font-size: 20px;
}

a.btn-arrow-chevronlarge:before, .vc_btn3-container.btn-arrow-chevronlarge a.vc_btn3:before,
button.btn-arrow-chevronlarge:before, .btn-arrow-chevronlarge button:before {
	width: 20px;
	height: 36px;
}

input[type=submit].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=submit],
input[type=reset].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=reset],
input[type=button].btn-arrow-chevronlarge, .btn-arrow-chevronlarge input[type=button] {
	-webkit-background-size: 20px 36px;
	   -moz-background-size: 20px 36px;
	     -o-background-size: 20px 36px;
	        background-size: 20px 36px;
}

@supports (not (-ms-ime-align:auto)) {
	input[type=submit]:hover,
	input[type=reset]:hover,
	input[type=button]:hover {
		background-position: -webkit-calc(100% - 25px) center;
		background-position: -moz-calc(100% - 25px) center;
		background-position: calc(100% - 25px) center;
	}
}

a.btn-flat-red, .vc_btn3-container.btn-flat-red a.vc_btn3,
button.btn-flat-red, .btn-flat-red button, .btn-flat-red a,
input[type=submit].btn-flat-red, .btn-flat-red input[type=submit],
input[type=reset].btn-flat-red, .btn-flat-red input[type=reset],
input[type=button].btn-flat-red, .btn-flat-red input[type=button] {
	background-color: #fd6049;
}

a.btn-flat-red:hover, .vc_btn3-container.btn-flat-red a.vc_btn3:hover,
button.btn-flat-red:hover, .btn-flat-red button:hover, .btn-flat-red a:hover,
input[type=submit].btn-flat-red:hover, .btn-flat-red input[type=submit]:hover,
input[type=reset].btn-flat-red:hover, .btn-flat-red input[type=reset]:hover,
input[type=button].btn-flat-red:hover, .btn-flat-red input[type=button]:hover {
	background-color: var(--pxl-green);
}

a.btn-flat-green, .vc_btn3-container.btn-flat-green a.vc_btn3,
button.btn-flat-green, .btn-flat-green button, .btn-flat-green a,
input[type=submit].btn-flat-greengreen, .btn-flat-green input[type=submit],
input[type=reset].btn-flat-greengreen, .btn-flat-greengreen input[type=reset],
input[type=button].btn-flat-greengreen, .btn-flat-greengreen input[type=button] {
	background-color: var(--pxl-green);
}

a.btn-flat-green:hover, .vc_btn3-container.btn-flat-green a.vc_btn3:hover,
button.btn-flat-green:hover, .btn-flat-green button:hover, .btn-flat-green a:hover,
input[type=submit].btn-flat-green:hover, .btn-flat-green input[type=submit]:hover,
input[type=reset].btn-flat-green:hover, .btn-flat-green input[type=reset]:hover,
input[type=button].btn-flat-green:hover, .btn-flat-green input[type=button]:hover {
	background-color: #fd6049;
}

button:not(:disabled), input[type=submit]:not(:disabled),
input[type=reset]:not(:disabled), input[type=button]:not(:disabled), select {
	cursor: pointer;
	cursor: hand }

button::-moz-focus-inner, input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner {
	padding: 0;
	border-style: none }

button, select {
	text-transform: none }

input[type="radio"], input[type="checkbox"] {
	-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
	     box-sizing: border-box;
	padding: 0;
	cursor: pointer }

input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"] {
	-webkit-appearance: none }

input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
	height: auto }

[type="search"] {
	outline-offset: -2px;
	-webkit-appearance: none }

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none }

::-webkit-file-upload-button {
	font: inherit;
	-webkit-appearance: button }

#content input[type=number] {
    padding: 0;
    height: 48px;
    outline-color: #39AA9C;
}

.input-field {
	margin-bottom: 15px;
	position: relative;
}

.input-field label.error {
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    font-size: 14px;
    padding-left: 0;
}

.input-field.lghalf-field {
	width: -webkit-calc(65% - 10px);
	width: -moz-calc(65% - 10px);
	width: calc(65% - 10px);
}

.input-field.smlhalf-field {
	width: -webkit-calc(35% - 10px);
	width: -moz-calc(35% - 10px);
	width: calc(35% - 10px);
}

.input-field.half-field {
	width: -webkit-calc(50% - 7.5px);
	width: -moz-calc(50% - 7.5px);
	width: calc(50% - 7.5px);
}

.wpcf7-form > *:not([class*="half-field"]) {
	width: 100%;
}

.input-field input:not([type="checkbox"]), textarea, select {
	width: 100%;
	background: rgba(235, 241, 243, 0.75) -webkit-calc(100% - 25px) 50%/30px no-repeat;
	background: rgba(235, 241, 243, 0.75) -moz-calc(100% - 25px) 50%/30px no-repeat;
	background: rgba(235, 241, 243, 0.75) calc(100% - 25px) 50%/30px no-repeat;
}

.input-field label {
	margin-bottom: 10px;
}

.icon-dots {
    background: url(/wp-content/themes/newwhello/assets/images/gif/whello-gif-dot-blue-white.gif) center/contain no-repeat;
    width: 50px;
    height: 12px;
}

.input-field label .icon-dots {
	margin-left: 5px;
}

.input-field label span {
	color: #ecbcc5;
}

.submit-field {
	margin-top: 15px;
}

.field-group {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

fieldset {
	min-width: 0;
	border: 0 }

progress {
	vertical-align: baseline }

/* Tables were unstyled. Academy articles are full of them. */
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin: 28px 0;
	font-size: var(--pxl-small);
}

th, td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--pxl-line);
}

thead th {
	font-weight: var(--pxl-weight-heading);
	color: var(--pxl-ink);
	background: var(--pxl-well);
	border-bottom: 1px solid var(--pxl-green-line);
}

tbody tr:last-child td { border-bottom: 0; }

audio, video {
	display: -moz-inline-stack;
	display: inline-block;
	*display: inline;
	zoom: 1;
	vertical-align: top }

hr {
	box-sizing: content-box;
	border: 0;
	height: 1px;
	background: var(--pxl-line);
	margin: 36px 0;
	overflow: visible;
}

/* ==========================================================================
   QUOTES
   From the mockup: no tinted box, no left bar, no decorative marks. Large
   Light type carries it, and a bold span pulls the one phrase that matters.
   A boxed quote reads like a callout; this reads like someone said it.
   ========================================================================== */

blockquote, .pxl-quote {
	margin: 40px 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	quotes: none;
	max-width: 20em;
}

blockquote, blockquote p,
.pxl-quote, .pxl-quote p {
	font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);   /* 24 - 34 */
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 300;
	font-style: normal;
	color: var(--pxl-ink);
}

/* The emphasised phrase. Use <strong> in the editor. */
blockquote :is(strong, b), .pxl-quote :is(strong, b) { font-weight: 700; color: var(--pxl-ink); }

blockquote p:last-child, .pxl-quote p:last-child { margin-bottom: 0; }
blockquote::before, blockquote::after,
blockquote p::before, blockquote p::after { content: none; }

/* Attribution: <cite>, or .pxl-quote__by with .pxl-quote__role beneath. */
blockquote cite, .pxl-quote__by {
	display: block;
	margin-top: 22px;
	font-size: var(--pxl-small);
	font-style: normal;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--pxl-ink);
}

.pxl-quote__role {
	display: block;
	font-size: var(--pxl-small);
	font-weight: 400;
	color: var(--pxl-muted);
}

:is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green)
:is(blockquote, .pxl-quote, blockquote p, .pxl-quote p, blockquote cite, .pxl-quote__by) { color: #fff; }
:is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark) .pxl-quote__role { color: rgba(255,255,255,.72); }

.pxl-quote--center { max-width: 24em; margin-left: auto; margin-right: auto; text-align: center; }

address {
	margin-bottom: 1rem;
	font-style: normal;
	line-height: inherit }

dd {
	margin-left: 0 }

pre, code, kbd, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
}

code, kbd, samp {
	font-size: 0.9em;
	background: var(--pxl-well);
	border: 1px solid var(--pxl-line);
	border-radius: 5px;
	padding: 2px 6px;
	color: var(--pxl-green-deep);
}

pre {
	margin: 24px 0;
	padding: 18px 20px;
	background: var(--pxl-well);
	border: 1px solid var(--pxl-line);
	border-radius: var(--pxl-radius-sm);
	overflow: auto;
}

pre code { background: none; border: 0; padding: 0; }

::selection { background: var(--pxl-green-tint); color: var(--pxl-ink); }

svg {
	overflow: hidden;
	vertical-align: middle }

.container {
	width: -webkit-calc(100% - 40px);
	width: -moz-calc(100% - 40px);
	width: calc(100% - 40px);
	margin: 0 auto;
}

[hidden] {
	display: none !important }

abbr[title] {
	border-bottom: none;
	text-decoration: none;
	border-bottom: 0;
	-webkit-text-decoration-skip-ink: none;
	        text-decoration-skip-ink: none }

/* ==========================================================================
   LONG-FORM PROSE
   Academy and blog only. Deliberately NOT applied to .entry-content on its
   own, because WPBakery landing pages sit inside that wrapper too and a
   max-width there would break their layouts.
   ========================================================================== */

.wrapper-academy,
.single-post .entry-content {
	font-size: var(--pxl-prose);
	line-height: var(--pxl-lh-prose);
}

.wrapper-academy > :is(p, ul, ol),
.single-post .entry-content > :is(p, ul, ol) {
	max-width: var(--pxl-measure-prose);
}

.wrapper-academy :is(h2, h3, h4),
.single-post .entry-content :is(h2, h3, h4) {
	margin-top: 44px;
}

.wrapper-academy :is(h2, h3, h4):first-child,
.single-post .entry-content :is(h2, h3, h4):first-child {
	margin-top: 0;
}

/* In running prose a colour change alone is not enough of a link signal. */
.wrapper-academy p a,
.single-post .entry-content p a { text-decoration: underline; }


/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}


/* Wordpress Reset & Plugin Standard Whello */
p a,
ul a,
ol a {
	color: var(--pxl-green);
	-webkit-transition: .2s;
	-o-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

p a:hover,
ul a:hover,
ol a:hover {
	color: #fd6049;
}

li#wp-admin-bar-duplicate_this {
    display: none;
}

.vc_row div.wpb_single_image {
    text-align: center;
}

/*.vc_row div.wpb_single_image * {
    width: 100%;
}*/

.wpb_wrapper .wpb_content_element {
	margin-bottom: 0;
}

.site.hide-content-footer .site-content {
    display: none;
}

.site.hide-content-footer {
    overflow: hidden;
}

.vc_row .wpb_column {
    z-index: 2;
}

body > .site:not(.hide-content-footer) {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	   -moz-box-orient: vertical;
	   -moz-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	min-height: 100vh;
}

body > .site > .site-content {
	-webkit-box-flex: 1;
	-webkit-flex: 1 0 auto;
	   -moz-box-flex: 1;
	    -ms-flex: 1 0 auto;
	        flex: 1 0 auto;
}

.vc_row.vc_row-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.vc_btn3-container .vc_btn3.vc_general,
.vc_btn3-container .vc_btn3.vc_general:hover {
	background-image: none;
	background-color: rgba(0,0,0,0);
}

.wpb_text_column p:not(:first-of-type) {
    margin-top: 16px!important;
}

.vc_row-has-fill>.wpb_column.vc_column_container>.vc_column-inner {
    padding-top: 0;
}

/*.wpb_single_image * {
    width: 100%;
}*/

/* Slick Slider */
.slick-slider {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
}

.slick-slider .slick-dots {
	width: 100%;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	margin-top: 15px;
	padding-right: 10px;
}

.slick-slider .slick-dots li {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.slick-slider .slick-dots li:not(:last-child) {
	margin-right: 8px;
}

.slick-slider .slick-dots button {
	width: 10px;
	height: 10px;
	border: 1px solid #0c80d7;
	background-color: #0c80d7;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	font-size: 0;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

.slick-slider .slick-dots button:hover {
	border-color: #074554;
}

.slick-dots .slick-active button {
	background-color: #074554;
	border-color: #074554;
}

.slick-slider .slick-prev {
    background: #fff url(assets/images/icon-chevronblack-left-perfectxl.svg) center/8px 16px no-repeat;
}

.slick-slider .slick-next {
    background: #fff url(assets/images/icon-chevronblack-right-perfectxl.svg) center/8px 16px no-repeat;
}

.listing-slider.slick-slider .slick-arrow {
	position: absolute;
    top: 100%;
    z-index: 1;
}

.slick-slider .slick-arrow {
    width: 40px;
    height: 40px;
    font-size: 0;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}

.slick-slider .slick-arrow.slick-disabled {
    opacity: .65;
}

.listing-slider .slick-track {
	margin-bottom: 20px;
}

.listing-slider .slick-track,
.listing-slider:not(.slick-slider) {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
       -moz-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
}

.listing-slider:not(.slick-slider) {
    white-space: nowrap;
    overflow: auto hidden;
}

.listing-slider:not(.slick-slider) > * {
    width: -webkit-calc(100% - 60px);
    width: -moz-calc(100% - 60px);
    width: calc(100% - 60px);
    min-width: 400px;
}

.listing-slider:not(.slick-slider) > *:not(:last-child) {
    margin-right: 30px;
}

.listing-slider.slick-slider .listing-item {
    margin-right: 24px;
}

.post-views {
    display: none !important;
}

/* Contact Form */
.wpcf7 .wpcf7-form {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	   -moz-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: none;
	color: #ecbcc5;
	position: absolute;
	top: 100%;
	left: 0;
	white-space: nowrap;
	font-size: 14px;
}

.wpcf7-form .wpcf7-form-control-wrap {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.wpcf7 .screen-reader-response {
    display: none;
}

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-form .wpcf7-response-output.wpcf7-spam-blocked {
	border-color: #ecbcc5;
	background-color: #ecbcc5;
	color: var(--pxl-orange);
}

.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    background-color: #2fd37d;
    color: #fff;
}

.wpcf7-form .wpcf7-response-output {
	margin: 25px 0 0 0;
	padding: 7px 12px;
	font-weight: var(--pxl-weight-heading);
}

.wpcf7-form input.wpcf7-submit {
    padding: 20px 65px 20px 65px;
	white-space: normal;
}

.wpcf7-form br {
	display: none;
}

.wpcf7-form .check-field {
	position: relative;
	margin-bottom: 20px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: start;
	-webkit-align-items: flex-start;
	   -moz-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

.wpcf7-form .check-field .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-form input[type="checkbox"] {
	display: inline-block;
	min-width: 20px;
	height: 20px;
	min-height: 20px;
	padding: 0;
	line-height: normal;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	border: solid 2px var(--pxl-green-line);
	cursor: pointer;
	background: center/14px 10px no-repeat;
	background-color: #fff;
	-webkit-transition: .3s;
	-o-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
	-webkit-appearance: none;
}

.wpcf7 .wpcf7-form input[type="checkbox"]:checked {
	background-image: url(assets/images/icon-checkmark-green-perfectxl.svg);
}

.wpcf7-form-control-wrap.checkbox-term .wpcf7-list-item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
       -moz-box-orient: horizontal;
       -moz-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.wpcf7-form-control-wrap.checkbox-term .wpcf7-list-item .wpcf7-list-item-label {
    margin: 0 20px 0 0;
    font-size: 12px;
    color: #000;
}

.wpcf7 .input-check-field {
    border: solid 1px #f3f3f3;
    background-color: #fff;
    padding: 15px 20px 20px;
}

.wpcf7 .input-check-field label {
    font-size: 12px;
    text-align: justify;
}

.wpcf7-form-control-wrap.checkbox-term .wpcf7-checkbox {
    margin-left: auto;
}

.wpcf7-form-control:not([type="submit"]):not(select):not(.wpcf7-radio):not(span) {
	background: rgba(235, 241, 243, 0.75) -webkit-calc(100% - 25px) 50%/30px no-repeat;
	background: rgba(235, 241, 243, 0.75) -moz-calc(100% - 25px) 50%/30px no-repeat;
	background: rgba(235, 241, 243, 0.75) calc(100% - 25px) 50%/30px no-repeat;
}

.input-field.-chosen input[type="file"].wpcf7-form-control.wpcf7-file:after,
.wpcf7-form-control:not([type="submit"]):not(select):not(textarea):not(span).valid {
    background-image: url(/wp-content/themes/newwhello/assets/images/icon/whello-checkmark-bg-green.svg);
}

.wpcf7-form-control:not([type="submit"]):not(select):not(textarea):not(span).error,
.wpcf7-form-control:not([type="submit"]):not(select):not(textarea):not(span).wpcf7-not-valid {
	background-image: url(/wp-content/themes/newwhello/assets/images/icon/whello-close-bg-red.svg);
}

.input-field:not(.-chosen) input[type="file"].wpcf7-form-control.wpcf7-file:after,
.wpcf7-form-control:not([type="submit"]):not(select):not(textarea):not(span):not(.valid):not(.error):not(.wpcf7-not-valid) {
    background-image: url(/wp-content/themes/newwhello/assets/images/icon/whello-checkmark-blank-green.svg);
}

.wpcf7 .input-field input[type="file"].wpcf7-file {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	cursor: pointer;
	font-size: 0px;
}

.wpcf7 .input-field input[type="file"].wpcf7-file:after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0) -webkit-calc(100% - 25px) 50%/30px no-repeat;
    background: rgba(0,0,0,0) -moz-calc(100% - 25px) 50%/30px no-repeat;
    background: rgba(0,0,0,0) calc(100% - 25px) 50%/30px no-repeat;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

@supports (not (-ms-ime-align:auto)) {
	.wpcf7 .input-field input[type="file"].wpcf7-file {
		visibility: hidden;
	}

	.wpcf7 .input-field input[type="file"].wpcf7-file:after {
		visibility: visible;
	}
}

#content.site-content input[type="date"] {
    background-image: url(/wp-content/uploads/2019/12/orthocenter-calendar-outline-green.svg);
    -webkit-background-size: 24px 26px;
       -moz-background-size: 24px 26px;
         -o-background-size: 24px 26px;
            background-size: 24px 26px;
}

.input-group {
    background-color: #f6f6f6;
    padding: 25px 30px;
}

.input-group .input-field:last-child {
    margin-bottom: 0;
}

#content.site-content input[type="radio"] {
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    padding: 0;
    border-color: #d3d3d3;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    background-color: #fff;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}

#content.site-content input[type="radio"]:not(:checked):hover {
	border-color: #000;
}

#content.site-content input[type="radio"]:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	display: block;
	width: 10px;
	height: 10px;
	-webkit-border-radius: 50%;
	   -moz-border-radius: 50%;
	        border-radius: 50%;
	-webkit-transition: .2s;
	-o-transition: .2s;
	-moz-transition: .2s;
	transition: .2s;
}

#content.site-content input[type="radio"]:checked:after {
    background-color: var(--pxl-green);
}

.input-field .wpcf7-list-item {
    margin-left: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
}

.input-field .wpcf7-form-control.wpcf7-radio {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    width: 100%;
}

.input-field .wpcf7-form-control.wpcf7-radio > .wpcf7-list-item {
    margin-bottom: 10px;
}

.input-field .wpcf7-list-item .wpcf7-list-item-label {
    margin-left: 10px;
    margin-top: 2px;
    width: -webkit-calc(100% - 30px);
    width: -moz-calc(100% - 30px);
    width: calc(100% - 30px);
}

.checkbox-field {
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
       -moz-box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 25px 40px;
}

.wpcf7-form h5 {
    margin-bottom: 25px;
}

.input-field .wpcf7-checkbox {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
       -moz-box-orient: horizontal;
       -moz-box-direction: normal;
        -ms-flex-flow: row wrap;
            flex-flow: row wrap;
    width: 100%;
}

.input-field .wpcf7-checkbox .wpcf7-list-item {
    width: 50%;
    font-size: 16px;
    margin-bottom: 15px;
    padding-right: 5px;
}

.file-field {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    -webkit-box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
       -moz-box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0px 5px 16px 0 rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 10px 15px;
    height: 70px;
}

.file-field .label,
.file-field .button {
	position: relative;
	z-index: 11;
	pointer-events: none;
}

.file-field.-chosen {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.file-field .button {
	display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    -webkit-border-radius: 20px;
       -moz-border-radius: 20px;
            border-radius: 20px;
    border: solid 1px #eff3fe;
    background-color: #f1f5fe;
    font-weight: 700;
    color: #b3b3b3;
    -webkit-transition: background-color .3s, color .3s;
    -o-transition: background-color .3s, color .3s;
    -moz-transition: background-color .3s, color .3s;
    transition: background-color .3s, color .3s;
}

.file-field:hover .button {
    background-color: #0c80d7;
    color: #fff;
}

.file-field .label {
    font-weight: 700;
}

.file-field.-chosen .label {
    margin-left: 10px;
    margin-right: 45px;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    max-height: 21px;
}

.file-field.-chosen .button,
.file-field:not(.-chosen) .label {
    display: none;
}

.checkbox-group-special {
    background-color: #f1f5fe;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    padding-bottom: 30px;
}

.label-special label {
	margin-bottom: 15px;
    -webkit-box-shadow: 4.1px 2.8px 16px 0 rgba(0, 0, 0, 0.1);
       -moz-box-shadow: 4.1px 2.8px 16px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 4.1px 2.8px 16px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 30px;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    background-color: #fff;
    		display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;

    font-size: 18px;
    font-weight: 700;
	line-height: 1.5;
	color: #000;
	width: 100%;

}

.checkbox-group-special > .wpcf7-form-control-wrap {
    padding: 30px 30px 0;
}

.radio-group-button label a {
    display: inline;
    padding: 0;
    color: var(--pxl-orange);
}

.radio-group-button label span {
    color: #000;
}

.radio-group-button .wpcf7-list-item {
    position: relative;
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
            border-radius: 30px;
    overflow: hidden;
    margin-bottom: 10px;
}

#content .radio-group-button input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
    opacity: 0;
}

.radio-group-button .wpcf7-list-item .wpcf7-list-item-label {
    margin: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #eff3fe;
    font-weight: 700;
    -webkit-transition: background-color .3s;
    -o-transition: background-color .3s;
    -moz-transition: background-color .3s;
    transition: background-color .3s;
}

.radio-group-button .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label,
.radio-group-button .wpcf7-list-item:hover .wpcf7-list-item-label {
    background-color: #39c37b;
    color: #fff;
}

.radio-group-button-icons .wpcf7-list-item .wpcf7-list-item-label {
	position: relative;
    padding-right: 65px;
}

.radio-group-button-icons .wpcf7-list-item .wpcf7-list-item-label:after {
    content: '';
    position: absolute;
    top: -webkit-calc(50% - 15px);
    top: -moz-calc(50% - 15px);
    top: calc(50% - 15px);
    left: -webkit-calc(100% - 60px);
    left: -moz-calc(100% - 60px);
    left: calc(100% - 60px);
    z-index: 1;
    border: solid 1px #cfdcf8;
    background-color: #fff;
    -webkit-background-size: 14px 9px;
       -moz-background-size: 14px 9px;
         -o-background-size: 14px 9px;
            background-size: 14px 9px;
    background-position: center;
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    pointer-events: none;
}

.radio-group-button .wpcf7-list-item input[type="radio"]:checked ~ .wpcf7-list-item-label:after,
.radio-group-button .wpcf7-list-item:hover .wpcf7-list-item-label:after {
    background-image: url(/wp-content/themes/newwhello/assets/images/icon/whello-checkmark-green.svg);
}

.input-field.field-btn-hide {
    position: relative;
}

.input-field.field-btn-hide .btn-hide-form {
    background-color: rgba(0,0,0,0);
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 16px;
    line-height: 1.35;
}


*:focus, *:active, *:visited, *:hover {
	outline: 0 }

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

::-moz-selection {
	color: #fff;
    background-color: #a0a1b5;
    text-shadow: none }

::selection {
    color: #fff;
    background-color: #a0a1b5;
    text-shadow: none }

.listing-slider::-webkit-scrollbar { width: 0 !important; height: 0; }

.listing-slider { overflow: -moz-scrollbars-none; }

.listing-slider { -ms-overflow-style: none; }

.pagination,
.tw-pagination {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-webkit-flex-flow: row wrap;
	   -moz-box-orient: horizontal;
	   -moz-box-direction: normal;
	    -ms-flex-flow: row wrap;
	        flex-flow: row wrap;
	width: 100%;
	margin-top: 75px;
}

.tw-pagination li {
    width: auto;
}

.tw-pagination .next, .tw-pagination .prev {
    display: none;
}

.pagination a.page-numbers:hover,
.tw-pagination a.page:hover {
	color: #0c80d7;
}

.pagination .page-numbers.current,
.tw-pagination .page.current {
    background-color: #0c80d7;
    font-weight: 700;
    color: #fff;
}

.pagination .page-numbers,
.tw-pagination .page {
    width: 40px;
    height: 40px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
    font-size: 18px;
    color: #000;
    font-weight: 400;
    -webkit-transition: .2s;
    -o-transition: .2s;
    -moz-transition: .2s;
    transition: .2s;
}

html.prevent-scroll {
	overflow: hidden;
}

.vc_row:before {
	display: table-cell !important;
}

.wpb_text_column p:not(:first-of-type).form-row-last {
	margin-top: 0 !important;
}

.navbar-header {
	margin-bottom: 10px;
}

/* WooCommerce customization: see 'woocommerce.css' */

/* YITH customization */

.ywraq-wrapper {
	margin-bottom: 2em;
}

.ywraq-buttons {
	text-align: left !important;
	margin-bottom: 1em;
}

.ywraq-view-quote-wrapper.ywraq-status-ywraq-new .product-total {
	display: none !important;
}

.ywraq-form-table-wrapper .yith-ywraq-mail-form-wrapper {
	padding: 2em 0 !important;
}

.yith-ywraq-add-button img.ywraq-loader {
	width: auto;
	position: absolute;
	right: 16px;
	bottom: 16px;
}

.button.wc-backward {
	margin-bottom: 1em !important;
}

.yith-ywraq-add-to-quote {
	font-size: 18px;
	margin-top: 0 !important;
}
.yith-ywraq-add-to-quote a {
	color: #fd6049;
	font-size: 18px !important;
}

.ywraq-view-quote-wrapper h3 {
	margin-bottom: 0.75em !important;
}
.ywraq-view-quote-wrapper table.shop_table.order_details {
	width: 100%;
	margin-top: 1em !important;
	margin-bottom: 2em !important;
}

.ywraq_my_account_quotes_title {
	display: none;
}

/* Coupon Affiliates */

.wcu-user-coupon-linebreak {
	display: none;
}
.wcusage-register-form-title, .wcusage-login-form-title {
	font-size: 24px !important;
}
.wcusage-login-form-section .woocommerce-form {
	margin-top: 1em !important;
}
.wcu-dash-coupon-area .coupon-title {
	font-size: 24px !important;
}
.wcusage-dash-logout, .wcusage-dash-logout a {
	font-size: 16px !important;
	margin-top: 0 !important;
}
.wcusage_custom_ref_url {
	width: 600px !important;
}
.wcu-loading-loader .loader::before {
	display: none !important;
}

.wcutab button, .wcu-save-settings-button, #wcu6 .woocommerce-Button, #wcu6 button {
	padding: 10px 20px;
    font-size: 16px;
    line-height: 16px;
	border: none;
}


/* Video Element */
.video-player-popup {
	width: 100%;
	height: 600px;
	background: #f5f5f5 center/cover no-repeat;
	cursor: pointer;
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 100%;
	height: 100%;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	-webkit-transform: scale(1.04);
	   -moz-transform: scale(1.04);
	    -ms-transform: scale(1.04);
	     -o-transform: scale(1.04);
	        transform: scale(1.04);
	-webkit-transition: .3s;
	-o-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
}

.admin-bar .popup {
	padding-top: 48px;
}

.popup.popup-active {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	   -moz-transform: scale(1);
	    -ms-transform: scale(1);
	     -o-transform: scale(1);
	        transform: scale(1);
	pointer-events: auto;
}

.popup .overlay-popup {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .6);
	cursor: pointer;
}

.popup .inner-popup {
	position: relative;
	z-index: 2;
	width: 800px;
	max-width: -webkit-calc(100% - 40px);
	max-width: -moz-calc(100% - 40px);
	max-width: calc(100% - 40px);
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	        border-radius: 10px;
	padding: 50px 20px 20px;
	background-color: #fff;
}

.popup .close-popup {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: 40px;
	color: #000;
	line-height: 0;
	-webkit-transition: .3s;
	-o-transition: .3s;
	-moz-transition: .3s;
	transition: .3s;
}

.popup .close-popup:hover {
	color: #ff6b6b;
}

/* RESET STYLE PLYR JS */
.plyr-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

.plyr,
.plyr-wrapper {
	position: relative;
	width: 100%;
	height: 308px;
	overflow: hidden;
	cursor: pointer;
}

.plyr.plyr--video {
    overflow: visible;
}

.plyr.plyr--video.plyr--hide-controls .plyr__controls {
    -webkit-transform: none;
       -moz-transform: none;
        -ms-transform: none;
         -o-transform: none;
            transform: none;
}

.plyr .plyr__video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto !important;
}

.plyr .plyr__video-wrapper .plyr__video-embed__container.plyr__video-embed__container {
	width: 100%;
    height: 100%;
    padding-bottom: 0;
    -webkit-transform: none !important;
       -moz-transform: none !important;
        -ms-transform: none !important;
         -o-transform: none !important;
            transform: none !important;
}

.plyr .plyr__poster {
	-webkit-background-size: cover;
	   -moz-background-size: cover;
	     -o-background-size: cover;
	        background-size: cover;
}

.plyr.plyr__poster-enabled.plyr--paused .plyr__poster,
.plyr.plyr__poster-enabled.plyr--playing .plyr__poster {
	opacity: 0;
}

.plyr.plyr__poster-enabled .plyr__poster,
.plyr.plyr__poster-enabled.plyr--paused.plyr--stopped .plyr__poster {
    opacity: 1;
}

.plyr.plyr--video .plyr__controls {
	opacity: 0;
}

.plyr.plyr--video.plyr--playing .plyr__controls {
	opacity: 1;
}

.plyr.plyr--full-ui.plyr--video>.plyr__control {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	   -moz-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	   -moz-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	width: 68px;
	height: 68px;
	border: 4px solid #fff;
	padding: 0;
	background-color: rgba(0, 0, 0, 0);
	overflow: hidden;
}

.plyr.plyr--video:hover>.plyr__control {
	background-color: #fff;
}

.plyr.plyr--video>.plyr__control>svg {
	width: 20px;
	height: 20px;
	fill: #fff;
}

.plyr.plyr--video:hover>.plyr__control>svg {
	fill: #FD6049;
}

.plyr.plyr--video input[type=range] {
	color: #FD6049;
}


/* ==========================================================================
   COMPONENTS — one button system, one card system
   --------------------------------------------------------------------------
   Rewritten as a system rather than a list of legacy class names. The rule
   is: exactly ONE element draws the card, exactly ONE element draws the
   button, and everything nested inside either is forced flat. That is what
   stops the layered "custom CSS that didn't quite work" look.
   ========================================================================== */


/* ==========================================================================
   1. BUTTONS
   ========================================================================== */

/* --- 1a. the container is never visible ---------------------------------
   WPBakery wraps every button in a .vc_btn3-container, and the builder lets
   you put a background, border and padding on that wrapper. That is where
   the stray squares and offset outlines came from. Strip it, always.
   ------------------------------------------------------------------------ */

body .vc_btn3-container {
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	border-radius: 0;
	line-height: 0;          /* no stray descender gap under the button */
}

body .vc_btn3-container.vc_btn3-center { text-align: center; }
body .vc_btn3-container.vc_btn3-right  { text-align: right; }
body .vc_btn3-container:is(.vc_btn3-left, .vc_btn3-inline) { text-align: left; }

/* --- 1b. every button, one shape ---------------------------------------- */

body :is(.vc_btn3-container a.vc_general.vc_btn3,
         a.vc_general.vc_btn3,
         a.cta-btn,
         a.wh-button,
         .element-button-standard a,
         input[type=submit],
         button[type=submit],
         .woocommerce a.button,
         .woocommerce input.button,
         .woocommerce button.button) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: auto;
	max-width: 100%;
	font-family: inherit;
	font-size: 1.063rem;
	font-weight: var(--pxl-weight-button);
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	padding: 15px 26px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	background-image: none;
	cursor: pointer;
	position: relative;
	transition: background-color .18s var(--pxl-ease),
	            border-color .18s var(--pxl-ease),
	            color .18s var(--pxl-ease),
	            box-shadow .18s var(--pxl-ease),
	            transform .18s var(--pxl-ease);
}

/* --- 1c. primary: orange ------------------------------------------------- */

body :is(.vc_btn3-container a.vc_general.vc_btn3,
         a.vc_general.vc_btn3,
         a.cta-btn,
         a.wh-button,
         .element-button-standard a,
         input[type=submit],
         button[type=submit],
         .woocommerce a.button.alt,
         .woocommerce input.button.alt) {
	background-color: var(--pxl-orange);
	border-color: var(--pxl-orange);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(253,96,73,.5);
}

body :is(.vc_btn3-container a.vc_general.vc_btn3,
         a.vc_general.vc_btn3,
         a.cta-btn,
         a.wh-button,
         .element-button-standard a,
         input[type=submit],
         button[type=submit],
         .woocommerce a.button.alt,
         .woocommerce input.button.alt):hover {
	background-color: var(--pxl-orange-deep);
	border-color: var(--pxl-orange-deep);
	color: #fff;
	box-shadow: 0 10px 22px -8px rgba(253,96,73,.6);
	transform: translateY(-1px);
}

/* --- 1d. secondary: white with a hairline -------------------------------
   vc_btn3-color-grey is NOT a signal. WPBakery stamps it on nearly every
   button on this site, so only the wrapper classes mean anything.
   ------------------------------------------------------------------------ */

body :is(.btn-white, .btn-outline-green) a.vc_general.vc_btn3,
body a.vc_general.vc_btn3[class*="vc_btn3-style-outline"],
body .woocommerce a.button:not(.alt),
body .woocommerce input.button:not(.alt) {
	background-color: #fff;
	border: 1.5px solid #cfe0dd;
	color: var(--pxl-green-deep);
	font-weight: var(--pxl-weight-button);
	box-shadow: none;
}

body :is(.btn-white, .btn-outline-green) a.vc_general.vc_btn3:hover,
body a.vc_general.vc_btn3[class*="vc_btn3-style-outline"]:hover,
body .woocommerce a.button:not(.alt):hover,
body .woocommerce input.button:not(.alt):hover {
	background-color: var(--pxl-green-tint);
	border-color: var(--pxl-green);
	color: var(--pxl-green-deep);
	box-shadow: none;
	transform: none;
}

/* --- 1e. green ----------------------------------------------------------- */

body a.vc_general.vc_btn3[class*="vc_btn3-color-green"],
body .btn-flat-green a.vc_general.vc_btn3 {
	background-color: var(--pxl-green);
	border-color: var(--pxl-green);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(66,117,110,.5);
}

body a.vc_general.vc_btn3[class*="vc_btn3-color-green"]:hover,
body .btn-flat-green a.vc_general.vc_btn3:hover {
	background-color: var(--pxl-green-deep);
	border-color: var(--pxl-green-deep);
	color: #fff;
}

/* --- 1f. link-arrow: text only, always identical ------------------------
   These are tertiary links, not buttons. Every variant renders the same way
   whatever wrapper classes it carries, including .full-width and
   vc_btn3-block — that inconsistency is what staggered the four links in
   the "3. Roll-out" card.
   ------------------------------------------------------------------------ */

body :is(.btn-arrow-chevronred, .btn-arrow-chevrongreen, .btn-arrow-chevronlarge,
         .btn-arrow-mailgreen, .btn-arrow-telgreen, .btn-arrow-wagreen,
         .link-arrow, .btn-link, .btn-transparent) a.vc_general.vc_btn3,
body a.vc_general.vc_btn3[class*="vc_btn3-style-text"] {
	display: inline-flex !important;
	align-items: center;
	justify-content: flex-start !important;
	gap: 8px;
	width: auto !important;
	padding: 6px 0 !important;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: var(--pxl-text);
	font-weight: var(--pxl-weight-button);
	color: var(--pxl-orange);
	white-space: normal;
	text-align: left;
}

body :is(.btn-arrow-chevronred, .btn-arrow-chevrongreen, .btn-arrow-chevronlarge,
         .btn-arrow-mailgreen, .btn-arrow-telgreen, .btn-arrow-wagreen,
         .link-arrow, .btn-link, .btn-transparent) a.vc_general.vc_btn3:hover,
body a.vc_general.vc_btn3[class*="vc_btn3-style-text"]:hover {
	background: none;
	box-shadow: none;
	transform: none;
	color: var(--pxl-green);
}

body [class*="btn-arrow"] a.vc_general.vc_btn3::before { flex: none; }

/* A stack of link-arrows sits flush left as a list, not centred. */
body .vc_btn3-container:is([class*="btn-arrow"], .link-arrow, .btn-link) { text-align: left; }

/* --- 1g. buttons on a dark surface -------------------------------------- */

body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green,
         .bg-green, .topbar-footer, .row-card-situation) :is(.btn-white, .btn-outline-green, .btn-transparent, .btn-ghost) a.vc_general.vc_btn3,
body .row-card-situation .vc_btn3-container:not([class*="btn-flat"]) a.vc_general.vc_btn3 {
	background: transparent;
	border: 1.5px solid rgba(255,255,255,.5);
	color: #fff;
	font-weight: var(--pxl-weight-button);
	box-shadow: none;
}

body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green,
         .bg-green, .topbar-footer, .row-card-situation) :is(.btn-white, .btn-outline-green, .btn-transparent, .btn-ghost) a.vc_general.vc_btn3:hover,
body .row-card-situation .vc_btn3-container:not([class*="btn-flat"]) a.vc_general.vc_btn3:hover {
	background: rgba(255,255,255,.16);
	border-color: #fff;
	color: #fff;
	transform: none;
	box-shadow: none;
}

/* The orange glow needs a light surface to fall onto; on colour it haloes. */
body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green,
         .bg-green, .bg-orange, .topbar-footer, .row-card-situation) :is(a.vc_general.vc_btn3, a.cta-btn, input[type=submit]) {
	box-shadow: none;
}

body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green,
         .bg-green, .topbar-footer) :is([class*="btn-arrow"], .link-arrow, .btn-link) a.vc_general.vc_btn3,
body .row-card-situation :is([class*="btn-arrow"], .link-arrow) a.vc_general.vc_btn3 {
	color: #fff;
}

/* --- 1h. icons in the flow ---------------------------------------------- */

body a.vc_general.vc_btn3 .vc_btn3-icon {
	position: static !important;
	transform: none;
	margin: 0 !important;
	font-size: 13px;
	line-height: 1;
	flex: none;
	transition: transform .18s var(--pxl-ease);
}
body a.vc_general.vc_btn3.vc_btn3-icon-left  .vc_btn3-icon { order: -1; }
body a.vc_general.vc_btn3:is(.vc_btn3-icon-left, .vc_btn3-icon-right) { padding-left: 26px; padding-right: 26px; }
body a.vc_general.vc_btn3.vc_btn3-icon-right:hover .vc_btn3-icon { transform: translateX(3px); }
body a.vc_general.vc_btn3.vc_btn3-icon-left:hover  .vc_btn3-icon { transform: translateX(-3px); }

/* whbutton: app-new.css zeroes the padding at seven classes deep and forces
   square corners with !important. Bring it back into the system. */
body div.vc_btn3-container[class*="whbutton"] a.vc_general.vc_btn3 {
	padding: 15px 26px !important;
	border-radius: 12px !important;
	width: auto !important;
	justify-content: center !important;
	gap: 10px;
}

/* Contact Form 7 and any submit inside a legacy btn- wrapper. */
body :is(.wpcf7, .wpcf7-form, .submit-field, [class*="btn-"]) :is(input[type=submit], button[type=submit]) {
	font-size: 1.063rem;
	line-height: 1.2;
	border-radius: 12px;
	padding: 15px 26px;
	width: auto;
}


/* ==========================================================================
   2. CARDS
   --------------------------------------------------------------------------
   THE CARD SURFACE IS DECLARED ONCE, BELOW. To bring a new block into the
   system, add its selector to this list — do not write a second card rule
   somewhere else, that is how the nested borders happened.

   .vc_col-has-fill > .vc_column-inner is the generic case: WPBakery adds
   that class to any column given a background in Design Options, which is
   how the Tailor-made, Excel Principles and client-logo cards are built.
   ========================================================================== */

/* A filled row that is NOT full-width is a card. That is the generic signal
   the Excel Principles blocks use — they carry no card class at all, which
   is why they stayed square. Full-width rows carry data-vc-full-width and
   are excluded, since those are page bands, not cards. */
body .vc_row.vc_row-has-fill:not([data-vc-full-width]):not(.vc_inner):not([class*="pxl-band"]),
body .vc_row > .wpb_column.vc_col-has-fill > .vc_column-inner,
body .vc_row.row-box-white > .wpb_column > .vc_column-inner > .wpb_wrapper,
body .vc_row.new-box-white > .wpb_column > .vc_column-inner > .wpb_wrapper,
body .vc_row.row-card-white > .wpb_column > .vc_column-inner > .wpb_wrapper,
body .vc_row.cards-white > .wpb_column > .vc_column-inner,
body .wpb_column.cards-white > .vc_column-inner > .wpb_wrapper,
body .vc_row.row-option-product .vc_inner,
body .vc_row.row-card-tools,
body .vc_row.row-audit-team-item,
body .listing-card .listitem-wrapper,
body .listing-grid .listitem-wrapper,
body .listing-blog .listing-item {
	border-radius: 16px;
	border: 1px solid var(--pxl-line);
	background: #fff;
	box-shadow: var(--pxl-shadow-sm);
	overflow: hidden;
	transition: border-color .2s var(--pxl-ease),
	            box-shadow .2s var(--pxl-ease),
	            transform .2s var(--pxl-ease);
}

body .vc_row.vc_row-has-fill:not([data-vc-full-width]):not(.vc_inner):not([class*="pxl-band"]):hover,
body .vc_row > .wpb_column.vc_col-has-fill > .vc_column-inner:hover,
body .vc_row.row-box-white > .wpb_column > .vc_column-inner > .wpb_wrapper:hover,
body .vc_row.new-box-white > .wpb_column > .vc_column-inner > .wpb_wrapper:hover,
body .vc_row.row-card-white > .wpb_column > .vc_column-inner > .wpb_wrapper:hover,
body .vc_row.cards-white > .wpb_column > .vc_column-inner:hover,
body .wpb_column.cards-white > .vc_column-inner > .wpb_wrapper:hover,
body .vc_row.row-option-product .vc_inner:hover,
body .vc_row.row-card-tools:hover,
body .listing-card .listitem-wrapper:hover,
body .listing-grid .listitem-wrapper:hover,
body .listing-blog .listing-item:hover {
	/* The border is present at rest and only deepens slightly on hover.
	   A border that appears from nothing, or jumps to full green, is what
	   reads as a legacy theme effect. */
	border-color: var(--pxl-line-hover);
	box-shadow: var(--pxl-shadow);
	transform: translateY(-3px);
	position: relative;
	z-index: 2;   /* a lifting card must sit ABOVE the band above it, or it
	                 slides underneath — no per-page padding needed */
}

/* --- 2b. NOTHING INSIDE A CARD DRAWS ITSELF AS A CARD -------------------
   One rule, applied to every card surface. Without it a card containing an
   inner row renders as a card inside a card inside a card.
   ------------------------------------------------------------------------ */

/* THIS RULE WAS EATING THE CARDS. It listed .wpb_column.vc_col-has-fill as
   an ancestor and .vc_column-inner as a target — but the card surface IS
   ".wpb_column.vc_col-has-fill > .vc_column-inner", so the rule matched the
   card itself at higher specificity and stripped its radius and border.
   That is why almost every card lost its corners in the last round.

   It now only reaches things nested inside an INNER row, which a card
   surface never is. */
body :is(.vc_row.row-box-white, .vc_row.new-box-white, .vc_row.row-card-white,
         .vc_row.cards-white, .wpb_column.cards-white, .wpb_column.vc_col-has-fill,
         .vc_row.row-card-tools, .listing-card, .listing-grid)
.vc_row.vc_inner:not(.vc_row-has-fill),
body :is(.vc_row.row-box-white, .vc_row.new-box-white, .vc_row.row-card-white,
         .vc_row.cards-white, .wpb_column.cards-white, .wpb_column.vc_col-has-fill,
         .vc_row.row-card-tools, .listing-card, .listing-grid)
.vc_row.vc_inner :is(.wpb_wrapper, .vc_column-inner):not(.vc_row-has-fill) {
	border: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

/* Pricing tiers are built entirely from nested .vc_inner rows, so the
   flatten rule above must not touch them — that is what detached the
   MOST POPULAR and INDUSTRY TAILORED bars from their cards. */
body .vc_row.row-option-product .vc_inner { overflow: hidden; }
body .vc_row.row-option-product .vc_inner .vc_row-has-fill:first-child {
	border-radius: 16px 16px 0 0;
	margin-top: -1px;
}
body .vc_row.row-option-product .vc_inner :is(.wpb_wrapper, .vc_column-inner) {
	background: none;
	border: 0;
	box-shadow: none;
}

/* The one exception: a filled inner row is a card header (the pricing
   "INDUSTRY TAILORED" bar, the green logo strip on Tailor-made). Keep its
   fill and let the card's overflow:hidden round it. */
body .vc_row.vc_inner.vc_row-has-fill,
body .wpb_column.vc_col-has-fill > .vc_column-inner > .wpb_wrapper > .wpb_single_image:first-child {
	border-radius: 0;
}

/* --- 2c. green cards keep their fill ------------------------------------ */

/* The column and its inner both carry a background, so a hard-edged plate
   showed behind the rounded green card — the "division between the shadowy
   part and the white background". Only the wrapper draws. */
body :is(.row-card-situation, .row-box-green) > .wpb_column,
body :is(.row-card-situation, .row-box-green) > .wpb_column > .vc_column-inner {
	background: none !important;
	box-shadow: none !important;
	border: 0 !important;
}

body .row-card-situation > .wpb_column > .vc_column-inner > .wpb_wrapper,
body .row-box-green > .wpb_column > .vc_column-inner > .wpb_wrapper {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--pxl-shadow-sm);
	transition: box-shadow .2s var(--pxl-ease), transform .2s var(--pxl-ease);
}

body .row-card-situation > .wpb_column > .vc_column-inner > .wpb_wrapper:hover,
body .row-box-green > .wpb_column > .vc_column-inner > .wpb_wrapper:hover {
	box-shadow: var(--pxl-shadow);
	transform: translateY(-3px);
	position: relative;
	z-index: 2;
}

/* --- 2d. text on any dark surface ---------------------------------------
   ADD NEW DARK SECTIONS HERE. The h1-h6 colour rule is an element selector
   and overrides inherited white, so titles come out black on green without
   this list.
   ------------------------------------------------------------------------ */

body :is(.row-card-situation, .row-box-green, .bg-green, .bg-orange, .topbar-footer,
         .pxl-band--green, .pxl-band--deep, .pxl-band--dark) :is(h1, h2, h3, h4, h5, h6) {
	color: #fff;
}

body :is(.row-card-situation, .row-box-green, .bg-green, .bg-orange, .topbar-footer,
         .pxl-band--green, .pxl-band--deep, .pxl-band--dark) :is(p, li, span, strong, b) {
	color: inherit;
}

/* --- 2e. Academy listing --------------------------------------------------
   The theme pulls the thumbnail out of the card with negative margins that
   assume 34px/24px padding on .listitem-wrapper, and the tags were sized
   against an 18px body. Both retuned to the current type scale.
   -------------------------------------------------------------------------- */

/* The outer .listing-item is a positioning wrapper only. It was drawing a
   square white box around the rounded .listitem-wrapper — the mismatched
   corners in Academy. Only the inner element is the card. */
body :is(.listing-card, .listing-grid) .listing-item {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 16px;
	overflow: visible;
	padding: 0;
}

body .listing-card .listitem-wrapper { padding: 34px 24px 24px; }
body .listing-academy.listing-card .image-wrapper { height: 220px; }

body .wrapp-content-tag { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
body .wrapp-content-tag a {
	font-size: var(--pxl-xs);
	font-weight: 500;
	padding: 4px 11px;
	margin: 0;
	background-color: var(--pxl-green-tint);
	border: 1px solid var(--pxl-green-line);
	color: var(--pxl-green-deep);
	border-radius: var(--pxl-radius-pill);
}
body .wrapp-content-tag a:hover { background: var(--pxl-green); border-color: var(--pxl-green); color: #fff; }

body .listing-card .title-listing { font-size: var(--pxl-h3); margin-bottom: 10px; }
body .listing-card .excerpt-listing { font-size: var(--pxl-small); line-height: 1.6; }
body .learn-more-academy { font-size: var(--pxl-text); font-weight: var(--pxl-weight-button); color: var(--pxl-orange); }


/* ==========================================================================
   3. BANDS — add the class in the builder instead of picking a colour in
   Design Options, so the colour stays tokenised.
   ========================================================================== */

.pxl-band--tint  { background: var(--pxl-green-tint); }
.pxl-band--off   { background: var(--pxl-off); border-top: 1px solid var(--pxl-line); border-bottom: 1px solid var(--pxl-line); }
.pxl-band--green { background: var(--pxl-green); }
.pxl-band--deep  { background: var(--pxl-green-deep); }
.pxl-band--dark  { background: var(--pxl-dark); }

/* A tinted row inside an already-filled section paints grey on grey. */
body .vc_section-has-fill .vc_row:is(.bg_grey, .bg_white) { background: transparent; }


/* ==========================================================================
   BUTTON VARIANTS, MICRO-COPY AND TRUST ROW
   --------------------------------------------------------------------------
   Add these in WPBakery under "Extra class name", on the button element or
   on its container. They work on plain links too, so they are not tied to
   vc_btn3 and will survive a move off WPBakery later.
   ========================================================================== */

/* --- the three button types ---------------------------------------------
   1. .pxl-btn--primary    orange fill        the main action, one per view
   2. .pxl-btn--secondary  white + hairline   the alternative action
   3. .pxl-btn--tertiary   text + chevron     "see all", never competes
   ------------------------------------------------------------------------ */

body a.pxl-btn, body button.pxl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: inherit;
	font-size: 1.063rem;
	font-weight: var(--pxl-weight-button);
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	padding: 15px 26px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	transition: background-color .18s var(--pxl-ease), border-color .18s var(--pxl-ease),
	            color .18s var(--pxl-ease), box-shadow .18s var(--pxl-ease),
	            transform .18s var(--pxl-ease);
}

body a.pxl-btn--primary,
body .pxl-btn--primary a.vc_general.vc_btn3 {
	background-color: var(--pxl-orange);
	border-color: var(--pxl-orange);
	color: #fff;
	box-shadow: 0 8px 18px -8px rgba(253,96,73,.5);
}
body a.pxl-btn--primary:hover,
body .pxl-btn--primary a.vc_general.vc_btn3:hover {
	background-color: var(--pxl-orange-deep);
	border-color: var(--pxl-orange-deep);
	color: #fff;
	transform: translateY(-1px);
}

/* Secondary: white with a hairline. Ink label at rest, green on hover, so
   it reads as a real alternative rather than a disabled primary. */
body a.pxl-btn--secondary,
body .pxl-btn--secondary a.vc_general.vc_btn3 {
	background-color: #fff;
	border: 1.5px solid var(--pxl-line-hover);
	color: var(--pxl-ink);
	box-shadow: none;
}
body a.pxl-btn--secondary:hover,
body .pxl-btn--secondary a.vc_general.vc_btn3:hover {
	background-color: var(--pxl-green-tint);
	border-color: var(--pxl-green);
	color: var(--pxl-green-deep);
	transform: none;
	box-shadow: none;
}

/* Tertiary: text and a chevron. No box, ever. */
body a.pxl-btn--tertiary,
body .pxl-btn--tertiary a.vc_general.vc_btn3 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: var(--pxl-text);
	font-weight: var(--pxl-weight-button);
	color: var(--pxl-orange);
}
body a.pxl-btn--tertiary::after,
body .pxl-btn--tertiary a.vc_general.vc_btn3::after {
	content: "\276F";
	font-size: .85em;
	transition: transform .18s var(--pxl-ease);
}
body a.pxl-btn--tertiary:hover,
body .pxl-btn--tertiary a.vc_general.vc_btn3:hover {
	color: var(--pxl-green);
	background: none;
	transform: none;
}
body a.pxl-btn--tertiary:hover::after,
body .pxl-btn--tertiary a.vc_general.vc_btn3:hover::after { transform: translateX(3px); }

/* On a dark band: secondary goes translucent, tertiary goes white. */
body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green, .topbar-footer)
:is(a.pxl-btn--secondary, .pxl-btn--secondary a.vc_general.vc_btn3) {
	background: transparent;
	border-color: rgba(255,255,255,.45);
	color: #fff;
}
body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green, .topbar-footer)
:is(a.pxl-btn--secondary:hover, .pxl-btn--secondary a.vc_general.vc_btn3:hover) {
	background: rgba(255,255,255,.16);
	border-color: #fff;
	color: #fff;
}
body :is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green, .topbar-footer)
:is(a.pxl-btn--tertiary, .pxl-btn--tertiary a.vc_general.vc_btn3) { color: #fff; }

/* Two buttons side by side. */
.pxl-btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pxl-btn-row--center { justify-content: center; }


/* --- micro-copy -----------------------------------------------------------
   The quiet line under a CTA. Small, muted, never bold. Separate clauses
   with a middot rather than a comma.
   -------------------------------------------------------------------------- */

.pxl-microcopy {
	display: block;
	margin-top: 14px;
	font-size: var(--pxl-small);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--pxl-muted);
}
.pxl-microcopy--center { text-align: center; }
:is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green) .pxl-microcopy { color: rgba(255,255,255,.7); }


/* --- trust row ------------------------------------------------------------
   The ticked reassurance line under a hero CTA. Markup: a <ul> with the
   class, one <li> per claim. The tick is generated — do not type it.
   -------------------------------------------------------------------------- */

ul.pxl-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 26px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
ul.pxl-trust li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: var(--pxl-small);
	font-weight: 400;
	line-height: 1.4;
	color: var(--pxl-body);
}
ul.pxl-trust li::before {
	content: "";
	flex: none;
	width: 15px;
	height: 12px;
	background: url(assets/images/icon-checkmark-green-perfectxl.svg) center/contain no-repeat;
}
.pxl-trust--center { justify-content: center; }
:is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green) ul.pxl-trust li { color: rgba(255,255,255,.85); }
:is(.pxl-band--green, .pxl-band--deep, .pxl-band--dark, .row-box-green, .bg-green) ul.pxl-trust li::before {
	background-image: url(assets/images/icon-checkmark-white-perfectxl.svg);
}