@ptcwebops/ptcw-design 6.3.65-beta → 6.3.68-beta

package/dist/cjs/ptc-form-radio-button.cjs.entry.js

@@ -12,14 +12,14 @@ const PtcFormRadioButton = class {
     this.checkedChanged = index.createEvent(this, "checkedChanged", 7);
     this.radioButtonOnClick = (radioButton) => {
       if (!this.isDisabled) {
-        const svgCircle = radioButton.querySelector('svg');
+        const svgCircle = radioButton.querySelector("svg");
         if (svgCircle) {
           this.checked = !this.checked;
-          svgCircle.setAttribute('data-checked', String(this.checked));
+          svgCircle.setAttribute("data-checked", String(this.checked));
           this.checkedChanged.emit({
             el: this.el,
             name: this.name,
-            checked: this.checked
+            checked: this.checked,
           });
         }
       }
@@ -30,11 +30,11 @@ const PtcFormRadioButton = class {
     this.checked = this.isChecked;
   }
   componentDidLoad() {
-    const svgCircle = this.el.shadowRoot.querySelector('svg');
-    svgCircle.setAttribute('data-checked', String(this.checked));
+    const svgCircle = this.el.shadowRoot.querySelector("svg");
+    svgCircle.setAttribute("data-checked", String(this.checked));
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-form-radio-button", onClick: e => this.radioButtonOnClick(e.currentTarget), "data-disabled": this.isDisabled }, index.h("svg", { height: "14px", width: "14px", viewBox: "0 0 14 14" }, index.h("circle", { class: "outer-circle", cx: "7", cy: "7", r: "6", "stroke-width": "1", fill: "transparent" }), index.h("circle", { class: "inner-circle", cx: "7", cy: "7", r: "3", "stroke-width": "0", fill: "transparent" })), index.h("div", { class: "radio-label" }, index.h("ptc-para", { "font-size": "xx-small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", null))))));
+    return (index.h(index.Host, null, index.h("div", { class: "ptc-form-radio-button", onClick: (e) => this.radioButtonOnClick(e.currentTarget), "data-disabled": this.isDisabled }, index.h("svg", { height: "14px", width: "14px", viewBox: "0 0 14 14" }, index.h("circle", { class: "outer-circle", cx: "7", cy: "7", r: "6", "stroke-width": "1", fill: "transparent" }), index.h("circle", { class: "inner-circle", cx: "7", cy: "7", r: "3", "stroke-width": "0", fill: "transparent" })), index.h("div", { class: "radio-label" }, index.h("ptc-para", { "font-size": "xx-small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, index.h("slot", null))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/ptc-form-radio-group.cjs.entry.js

@@ -15,14 +15,14 @@ const PtcFormRadioGroup = class {
     };
     this.checkUnique = (name) => {
       for (let key in this.checkedStates) {
-        this.checkedStates[key] = (name === key) ? true : false;
+        this.checkedStates[key] = name === key ? true : false;
       }
       let radioButtons = this.getGroupRadioButtons();
       for (let button of radioButtons) {
-        let name = button.getAttribute('name');
-        button.setAttribute('is-checked', this.checkedStates[name]);
-        let buttonSvg = button.shadowRoot.querySelector('svg');
-        buttonSvg.setAttribute('data-checked', String(this.checkedStates[name]));
+        let name = button.getAttribute("name");
+        button.setAttribute("is-checked", this.checkedStates[name]);
+        let buttonSvg = button.shadowRoot.querySelector("svg");
+        buttonSvg.setAttribute("data-checked", String(this.checkedStates[name]));
       }
     };
     this.checkedChangeListener = (e) => {
@@ -37,8 +37,8 @@ const PtcFormRadioGroup = class {
   componentDidLoad() {
     let radioButtons = this.getGroupRadioButtons();
     for (let button of radioButtons) {
-      let name = button.getAttribute('name');
-      let checked = button.getAttribute('is-checked') || false;
+      let name = button.getAttribute("name");
+      let checked = button.getAttribute("is-checked") || false;
       this.checkedStates[name] = Boolean(checked);
     }
     this.el.addEventListener("checkedChanged", this.checkedChangeListener);

package/dist/cjs/ptc-form.cjs.entry.js

@@ -10,14 +10,14 @@ const PtcForm = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.formData = {
-      email: '',
-      firstName: '',
-      lastName: '',
-      company: '',
-      country: '',
-      phone: '',
-      inquiryReason: '',
-      howhearselfreport: '',
+      email: "",
+      firstName: "",
+      lastName: "",
+      company: "",
+      country: "",
+      phone: "",
+      inquiryReason: "",
+      howhearselfreport: "",
       policyChecked: false,
     };
   }
@@ -25,8 +25,8 @@ const PtcForm = class {
   // private inquiryreasonEle: HTMLPtcTextfieldElement;
   // private howhearselfreport: HTMLPtcTextfieldElement;
   componentDidLoad() {
-    this.formButton = this.el.querySelector('.form-submit');
-    this.formButton.addEventListener('click', this.handleSubmit.bind(this));
+    this.formButton = this.el.querySelector(".form-submit");
+    this.formButton.addEventListener("click", this.handleSubmit.bind(this));
     //get Email
     this.emailEle = this.el.querySelector('ptc-textfield[field-id="contact-email"]');
     this.firstNameEle = this.el.querySelector('ptc-textfield[field-id="contact-firstname"]');
@@ -48,46 +48,106 @@ const PtcForm = class {
     this.formData.company = this.companyEle.inputValue;
     this.formData.phone = this.phoneEle.inputValue;
     if (this.isValid()) {
-      const formSubmitEvent = new CustomEvent('formSubmit', {
+      const formSubmitEvent = new CustomEvent("formSubmit", {
         detail: this.formData,
         bubbles: true,
       });
       this.el.dispatchEvent(formSubmitEvent);
     }
     else {
-      console.log('Form validation failed');
+      console.log("Form validation failed");
     }
   }
   isValid() {
-    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked } = this.formData;
-    const invalidLength = document.querySelectorAll('.invalid-field').length;
-    return (email !== '' &&
-      phone !== '' &&
-      firstName !== '' &&
-      lastName !== '' &&
-      company !== '' &&
-      country !== '' &&
-      inquiryReason !== '' &&
-      howhearselfreport != '' &&
+    const { email, firstName, lastName, company, country, phone, inquiryReason, howhearselfreport, policyChecked, } = this.formData;
+    const invalidLength = document.querySelectorAll(".invalid-field").length;
+    return (email !== "" &&
+      phone !== "" &&
+      firstName !== "" &&
+      lastName !== "" &&
+      company !== "" &&
+      country !== "" &&
+      inquiryReason !== "" &&
+      howhearselfreport != "" &&
       policyChecked &&
       invalidLength === 0);
   }
   render() {
     const multiSelectItems = [
-      { text: 'Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor metus, auctor id massa nec, tempor consectetur arcu. Ut et orci eget mauris tempor blandit vel et elit. Praesent congue.', selected: false, ptcDataEloquaName: 'item_1', ptcDataTargetEloquaName: 'item_target-1' },
-      { text: 'Item 2', selected: false, ptcDataEloquaName: 'item_2', ptcDataTargetEloquaName: 'item_target-2' },
-      { text: 'Item 3', selected: false, ptcDataEloquaName: 'item_3', ptcDataTargetEloquaName: 'item_target-3' },
-      { text: 'Item 4', selected: false, ptcDataEloquaName: 'item_4', ptcDataTargetEloquaName: 'item_target-4' },
-      { text: 'Item 5', selected: false, ptcDataEloquaName: 'item_5', ptcDataTargetEloquaName: 'item_target-5' },
-      { text: 'Item 6', selected: false, ptcDataEloquaName: 'item_6', ptcDataTargetEloquaName: 'item_target-6' },
-      { text: 'Item 7', selected: false, ptcDataEloquaName: 'item_7', ptcDataTargetEloquaName: 'item_target-7' },
-      { text: 'Item 8', selected: false, ptcDataEloquaName: 'item_8', ptcDataTargetEloquaName: 'item_target-8' },
-      { text: 'Item 9', selected: false, ptcDataEloquaName: 'item_9', ptcDataTargetEloquaName: 'item_target-9' },
-      { text: 'Item 10', selected: false, ptcDataEloquaName: 'item_10', ptcDataTargetEloquaName: 'item_target-10' },
-      { text: 'Item 11', selected: false, ptcDataEloquaName: 'item_11', ptcDataTargetEloquaName: 'item_target-11' },
-      { text: 'Item 12', selected: false, ptcDataEloquaName: 'item_12', ptcDataTargetEloquaName: 'item_target-12' },
+      {
+        text: "Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tortor metus, auctor id massa nec, tempor consectetur arcu. Ut et orci eget mauris tempor blandit vel et elit. Praesent congue.",
+        selected: false,
+        ptcDataEloquaName: "item_1",
+        ptcDataTargetEloquaName: "item_target-1",
+      },
+      {
+        text: "Item 2",
+        selected: false,
+        ptcDataEloquaName: "item_2",
+        ptcDataTargetEloquaName: "item_target-2",
+      },
+      {
+        text: "Item 3",
+        selected: false,
+        ptcDataEloquaName: "item_3",
+        ptcDataTargetEloquaName: "item_target-3",
+      },
+      {
+        text: "Item 4",
+        selected: false,
+        ptcDataEloquaName: "item_4",
+        ptcDataTargetEloquaName: "item_target-4",
+      },
+      {
+        text: "Item 5",
+        selected: false,
+        ptcDataEloquaName: "item_5",
+        ptcDataTargetEloquaName: "item_target-5",
+      },
+      {
+        text: "Item 6",
+        selected: false,
+        ptcDataEloquaName: "item_6",
+        ptcDataTargetEloquaName: "item_target-6",
+      },
+      {
+        text: "Item 7",
+        selected: false,
+        ptcDataEloquaName: "item_7",
+        ptcDataTargetEloquaName: "item_target-7",
+      },
+      {
+        text: "Item 8",
+        selected: false,
+        ptcDataEloquaName: "item_8",
+        ptcDataTargetEloquaName: "item_target-8",
+      },
+      {
+        text: "Item 9",
+        selected: false,
+        ptcDataEloquaName: "item_9",
+        ptcDataTargetEloquaName: "item_target-9",
+      },
+      {
+        text: "Item 10",
+        selected: false,
+        ptcDataEloquaName: "item_10",
+        ptcDataTargetEloquaName: "item_target-10",
+      },
+      {
+        text: "Item 11",
+        selected: false,
+        ptcDataEloquaName: "item_11",
+        ptcDataTargetEloquaName: "item_target-11",
+      },
+      {
+        text: "Item 12",
+        selected: false,
+        ptcDataEloquaName: "item_12",
+        ptcDataTargetEloquaName: "item_target-12",
+      },
     ];
-    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: event => this.handleSubmit(event) }, index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Select a country")), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-multi-select", { items: multiSelectItems, "is-required": 'true' }), index.h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
+    return (index.h(index.Host, null, index.h("div", { class: "ptc-container ptc-section-standard u-flex u-flex-justify-center" }, index.h("div", { class: "form-wrapper" }, index.h("max-width-container", { "max-width": "277", breakpoint: 480 }, index.h("ptc-title", { type: "h2", "text-align": "center", "title-size": "x-small", "title-color": "gray", upperline: "no-upperline", "title-display": "inline-block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-6", "is-plm-hub": "false" }, "Please fill out the form and a PTC sales representative will be in touch."), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" }), index.h("ptc-spacer", { breakpoint: "small", size: "small" })), index.h("form", { onSubmit: (event) => this.handleSubmit(event) }, index.h("ptc-textfield", { "field-id": "contact-firstname", "label-text": "First Name*", type: "text", "ptc-data-eloqua-name": "C_FirstName", "field-name": "firstname" }), index.h("ptc-textfield", { "field-id": "contact-lastname", "label-text": "Last Name*", type: "text", "ptc-data-eloqua-name": "C_LastName", "field-name": "lastname" }), index.h("ptc-textfield", { "field-id": "company", "label-text": "Company*", type: "text", "ptc-data-eloqua-name": "C_Company", "field-name": "company" }), index.h("ptc-textfield", { "field-id": "contact-email", "label-text": "Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "email" }), index.h("ptc-textfield", { "field-id": "company-email", "label-text": "Company Email*", type: "email", "ptc-data-eloqua-name": "C_EmailAddress", "field-name": "companyemail" }), index.h("ptc-select", { "field-id": "contact-country", label: "Country*", "ptc-data-eloqua-name": "C_Country", "field-name": "country" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item placehoder-li", "data-value": "" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Select a country")), index.h("li", { class: "mdc-list-item", "data-value": "USA" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "USA")), index.h("li", { class: "mdc-list-item", "data-value": "Canada" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Canada")), index.h("li", { class: "mdc-list-item", "data-value": "China" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "China")))), index.h("ptc-textfield", { "field-id": "contact-phone", "label-text": "Phone*", type: "tel", "ptc-data-eloqua-name": "C_BusPhone", "field-name": "phone" }), index.h("ptc-select", { label: "What information are you interested in?*", "ptc-data-eloqua-name": "Inquiry_Reason", "field-name": "inquiryreason", "field-id": "contact-inquiry" }, index.h("ul", { class: "mdc-list" }, index.h("li", { class: "mdc-list-item", "data-value": "Please select a value" }, index.h("span", { class: "mdc-list-item__ripple" })), index.h("li", { class: "mdc-list-item", "data-value": "Augmented Reality (AR)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Augmented Reality (AR)")), index.h("li", { class: "mdc-list-item", "data-value": "CAD" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Computer Aided Design")), index.h("li", { class: "mdc-list-item", "data-value": "Retail(FlexPLM)" }, index.h("span", { class: "mdc-list-item__ripple" }), index.h("span", { class: "mdc-list-item__text" }, "Fashion and Retail Product Lifecycle Management")))), index.h("ptc-multi-select", { items: multiSelectItems, "is-required": "true" }), index.h("ptc-textfield", { "field-id": "Self-Reporting", "label-text": "How can we help you?*", type: "text", "ptc-data-eloqua-name": "HowHearSelfReport", "ptc-max-length": "100", "field-name": "howhearselfreport" }), index.h("ptc-form-checkbox", { label: "I agree to the policy", "checkbox-id": "test" }), index.h("ptc-button", { class: "form-submit", color: "ptc-quaternary", type: "submit", styles: ":host{align-self:flex-end; margin-top: 48px; display:block;}" }, "Submit"))))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/ptc-hero.cjs.entry.js

@@ -15,12 +15,15 @@ const PtcHero = class {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (index.h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == 'jumbotron' ? ([index.h("ptc-overlay", { "filter-color": "black-1" }), index.h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null))) : (index.h("slot", null)))));
+    return (index.h(index.Host, { class: classMap }, index.h("div", { class: "ptc-hero-wrapper" }, !!this.bgUrl ? (index.h("ptc-img", { "image-type": "smart-bg", "img-url": this.bgUrl, "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }, this.heroType == "jumbotron" ? ([
+      index.h("ptc-overlay", { "filter-color": "black-1" }),
+      index.h("ptc-overlay", { "filter-color": "black-2" }),
+    ]) : this.heroType == "footer-cta" ? (index.h("ptc-overlay", { "filter-color": "black-3" })) : null, index.h("slot", null))) : (index.h("slot", null)))));
   }
   getCssClassMap() {
     return {
       [this.heroType]: this.heroType ? true : false,
-      [this.contentAlignment]: this.contentAlignment ? true : false
+      [this.contentAlignment]: this.contentAlignment ? true : false,
     };
   }
 };

package/dist/cjs/ptc-homepage-image-feature.cjs.entry.js

@@ -11,9 +11,11 @@ const PtcHomepageImageFeature = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
-  componentDidLoad() { utils.observeInView(this.hostEle, '.ptc-animate', true); }
+  componentDidLoad() {
+    utils.observeInView(this.hostEle, ".ptc-animate", true);
+  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: 'img-wrap ptc-animate' }, index.h("slot", { name: 'featured-image' })), index.h("div", { class: 'card-wrap ptc-animate' }, index.h("div", { class: 'card' }, index.h("slot", { name: 'card-title' }), index.h("slot", null)))));
+    return (index.h(index.Host, null, index.h("div", { class: "img-wrap ptc-animate" }, index.h("slot", { name: "featured-image" })), index.h("div", { class: "card-wrap ptc-animate" }, index.h("div", { class: "card" }, index.h("slot", { name: "card-title" }), index.h("slot", null)))));
   }
   get hostEle() { return index.getElement(this); }
 };

package/dist/cjs/ptc-homepage-video-background.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-63ddc79c.js');
 const utils = require('./utils-b63aef52.js');
 
-const ptcHomepageVideoBackgroundCss = "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\na {\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link, ptc-square-card,\n.hyphenate-text, ptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n.ptc-container {\n  padding-right: 24px;\n  padding-left: 24px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 1200px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1136px;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1200px;\n  }\n}\n.ptc-container-lg {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 480px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-03);\n    padding-right: var(--ptc-layout-spacing-03);\n  }\n}\n@media only screen and (min-width: 768px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-04);\n    padding-right: var(--ptc-layout-spacing-04);\n  }\n}\n@media only screen and (min-width: 992px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-element-spacing-08);\n    padding-right: var(--ptc-element-spacing-08);\n  }\n}\n@media only screen and (min-width: 1980px) {\n  .ptc-container-lg {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1900px;\n  }\n}\n.ptc-container-fluid {\n  width: 100%;\n}\n\n.primary-content-wrapper {\n  max-width: 720px;\n  padding: 120px 0;\n}\n@media only screen and (min-width: 992px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n\n.bg-video {\n  width: 100%;\n}\n\n.ptc-container {\n  position: relative;\n  z-index: 20;\n  min-height: 587px;\n}\n\n.card-links {\n  margin: 0;\n  padding-bottom: 72px;\n}\n@media only screen and (min-width: 992px) {\n  .card-links {\n    padding-bottom: 88px;\n  }\n}\n.card-links .secondary-content-wrapper {\n  margin: 0;\n  max-width: 720px;\n}\n.card-links .card-section {\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  flex-shrink: 0;\n  margin: 20px -24px 0;\n  white-space: nowrap;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section::-webkit-scrollbar {\n  display: none;\n}\n.card-links .card-section .card-link {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n  text-decoration: none;\n  z-index: 7;\n  align-items: center;\n  gap: 16px;\n  flex: 0 0 224px;\n  align-self: stretch;\n  border-radius: 4px 4px 0px 0px;\n  border-bottom: 2px solid var(--color-blue-07);\n  background: transparent;\n  backdrop-filter: blur(12px);\n  padding: 24px;\n  word-wrap: normal;\n  color: var(--color-white);\n  font-family: var(--ptc-font-latin);\n  font-size: var(--ptc-font-size-small);\n  font-style: var(--ptc-font-style-normal);\n  font-weight: var(--ptc-font-weight-bold);\n  line-height: var(--ptc-line-height-p);\n  margin: 0 12px;\n}\n.card-links .card-section .card-link:first-child {\n  margin-left: 24px;\n}\n.card-links .card-section .card-link:last-child {\n  margin-right: 24px;\n}\n.card-links .card-section .card-link icon-asset {\n  z-index: 10;\n}\n.card-links .card-section .card-link .link-text {\n  display: block;\n  inline-size: 190px;\n  white-space: break-spaces;\n  z-index: 10;\n  font-size: var(--ptc-font-size-small);\n}\n@media only screen and (min-width: 992px) {\n  .card-links .card-section .card-link .link-text {\n    font-size: var(--ptc-font-size-medium);\n  }\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh,\n.card-links .card-section .card-link .bgp {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 8;\n  opacity: 0;\n}\n.card-links .card-section .card-link .link-cover {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 11;\n  width: 99%;\n  height: 99%;\n  border-radius: var(--ptc-border-radius-standard);\n  border: 2px solid transparent;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh {\n  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.card-links .card-section .card-link .bgb {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);\n  opacity: 1;\n}\n.card-links .card-section .card-link .bgh {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);\n}\n.card-links .card-section .card-link .bgp {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);\n}\n.card-links .card-section .card-link:hover .bgb,\n.card-links .card-section .card-link:hover .bgp {\n  opacity: 0;\n}\n.card-links .card-section .card-link:hover .bgh {\n  opacity: 1;\n}\n.card-links .card-section .card-link:active .bgb,\n.card-links .card-section .card-link:active .bgh, .card-links .card-section .card-link.active .bgb,\n.card-links .card-section .card-link.active .bgh {\n  display: none;\n  opacity: 0;\n}\n.card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {\n  opacity: 1;\n}\n.card-links .card-section .card-link:focus-visible, .card-links .card-section .card-link:focus, .card-links .card-section .card-link:focus-within {\n  border-radius: var(--ptc-border-radius-standard);\n  outline: 5px solid var(--keyboard-nav-outline);\n  border-bottom-color: white;\n}\n.card-links .card-section .card-link:focus-visible .link-cover, .card-links .card-section .card-link:focus .link-cover, .card-links .card-section .card-link:focus-within .link-cover {\n  border-color: white;\n}\n.card-links .card-section:before {\n  position: absolute;\n  width: 32px;\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);\n  top: 16px;\n  right: 0;\n  bottom: 0;\n  z-index: 12;\n}\n.card-links .card-section.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed {\n  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n@media only screen and (min-width: 1200px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    align-content: flex-start;\n  }\n  .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {\n    box-shadow: unset;\n  }\n  .card-links .card-section .card-link {\n    flex: unset;\n  }\n  .card-links .card-section .card-link:first-child {\n    margin-left: 0;\n  }\n  .card-links .card-section .card-link:last-child {\n    margin-right: 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n  }\n}\n\n.card-section {\n  overflow-x: visible;\n  overflow-y: visible;\n  animation-duration: 0ms;\n  animation-delay: 1000ms;\n  animation-fill-mode: forwards;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section {\n    overflow-x: visible;\n  }\n}\n.card-section .card-link {\n  animation-duration: 750ms;\n  animation-delay: 0ms;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  transform: translate3d(0, 30%, 0);\n}\n.card-section .card-link.card-link-1 {\n  animation-delay: 0ms;\n}\n.card-section .card-link.card-link-2 {\n  animation-delay: 250ms;\n}\n.card-section .card-link.card-link-3 {\n  animation-delay: 500ms;\n}\n.card-section .card-link.card-link-4 {\n  animation-delay: 750ms;\n}\n.card-section.in-view {\n  animation-name: fadeUpInContainer;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section.in-view {\n    overflow: visible !important;\n  }\n}\n.card-section.in-view .card-link {\n  animation-name: fadeUpIn;\n}\n\n@keyframes fadeUpIn {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 30%, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translateZ(0);\n  }\n}\n@keyframes fadeUpInContainer {\n  0% {\n    overflow: visible;\n    overflow-y: visible;\n    overflow-x: visible;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: visible;\n    }\n  }\n  100% {\n    overflow: inherit;\n    overflow-y: hidden;\n    overflow-x: scroll;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: hidden;\n    }\n  }\n}";
+const ptcHomepageVideoBackgroundCss = "h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link,\nptc-square-card,\n.hyphenate-text,\nptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link,\nptc-square-card,\n.hyphenate-text,\nptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n:host {\n  display: block;\n  position: relative;\n  overflow: hidden;\n}\n\na {\n  text-decoration: none !important;\n  color: inherit !important;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link,\nptc-square-card,\n.hyphenate-text,\nptc-footer {\n  word-break: break-word;\n  hyphens: manual;\n  -webkit-hyphens: manual;\n  -moz-hyphens: manual;\n  -ms-hyphens: manual;\n}\n@supports (hyphenate-limit-chars: 12 3 3) {\n  h1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nul,\nli,\nptc-subnav,\nptc-tab-list,\nptc-link,\nptc-square-card,\n.hyphenate-text,\nptc-footer {\n    hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    /* For Safari */\n    -webkit-hyphenate-limit-after: 3;\n    /* For Safari */\n    hyphenate-limit-chars: 12 3 3;\n    hyphenate-limit-lines: 2;\n    hyphenate-limit-last: always;\n    hyphenate-limit-zone: 6%;\n    -webkit-hyphens: auto;\n    -webkit-hyphenate-limit-before: 3;\n    -webkit-hyphenate-limit-after: 3;\n    -webkit-hyphenate-limit-chars: 12 3 3;\n    -webkit-hyphenate-limit-lines: 2;\n    -moz-hyphens: auto;\n    -moz-hyphenate-limit-chars: 12 3 3;\n    -moz-hyphenate-limit-lines: 2;\n    -ms-hyphens: auto;\n    -ms-hyphenate-limit-chars: 12 3 3;\n    -ms-hyphenate-limit-lines: 2;\n  }\n}\n\n.ptc-container {\n  padding-right: 24px;\n  padding-left: 24px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 1200px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1136px;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .ptc-container {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1200px;\n  }\n}\n.ptc-container-lg {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media only screen and (min-width: 480px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-03);\n    padding-right: var(--ptc-layout-spacing-03);\n  }\n}\n@media only screen and (min-width: 768px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-layout-spacing-04);\n    padding-right: var(--ptc-layout-spacing-04);\n  }\n}\n@media only screen and (min-width: 992px) {\n  .ptc-container-lg {\n    padding-left: var(--ptc-element-spacing-08);\n    padding-right: var(--ptc-element-spacing-08);\n  }\n}\n@media only screen and (min-width: 1980px) {\n  .ptc-container-lg {\n    padding-left: 0;\n    padding-right: 0;\n    max-width: 1900px;\n  }\n}\n.ptc-container-fluid {\n  width: 100%;\n}\n\n.primary-content-wrapper {\n  max-width: 720px;\n  padding: 120px 0;\n}\n@media only screen and (min-width: 992px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .primary-content-wrapper {\n    padding: 160px 0;\n  }\n}\n\n.bg-video {\n  width: 100%;\n}\n\n.ptc-container {\n  position: relative;\n  z-index: 20;\n  min-height: 587px;\n}\n\n.card-links {\n  margin: 0;\n  padding-bottom: 72px;\n}\n@media only screen and (min-width: 992px) {\n  .card-links {\n    padding-bottom: 88px;\n  }\n}\n.card-links .secondary-content-wrapper {\n  margin: 0;\n  max-width: 720px;\n}\n.card-links .card-section {\n  display: flex;\n  position: relative;\n  flex-wrap: nowrap;\n  flex-shrink: 0;\n  margin: 20px -24px 0;\n  white-space: nowrap;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  transition: box-shadow var(--ptc-transition-medium) var(--ptc-ease-out);\n}\n.card-links .card-section::-webkit-scrollbar {\n  display: none;\n}\n.card-links .card-section .card-link {\n  cursor: pointer;\n  display: inline-flex;\n  position: relative;\n  overflow: hidden;\n  text-decoration: none;\n  z-index: 7;\n  align-items: center;\n  gap: 16px;\n  flex: 0 0 224px;\n  align-self: stretch;\n  border-radius: 4px 4px 0px 0px;\n  border-bottom: 2px solid var(--color-blue-07);\n  background: transparent;\n  backdrop-filter: blur(12px);\n  padding: 24px;\n  word-wrap: normal;\n  color: var(--color-white);\n  font-family: var(--ptc-font-latin);\n  font-size: var(--ptc-font-size-small);\n  font-style: var(--ptc-font-style-normal);\n  font-weight: var(--ptc-font-weight-bold);\n  line-height: var(--ptc-line-height-p);\n  margin: 0 12px;\n}\n.card-links .card-section .card-link:first-child {\n  margin-left: 24px;\n}\n.card-links .card-section .card-link:last-child {\n  margin-right: 24px;\n}\n.card-links .card-section .card-link icon-asset {\n  z-index: 10;\n}\n.card-links .card-section .card-link .link-text {\n  display: block;\n  inline-size: 190px;\n  white-space: break-spaces;\n  z-index: 10;\n  font-size: var(--ptc-font-size-small);\n}\n@media only screen and (min-width: 992px) {\n  .card-links .card-section .card-link .link-text {\n    font-size: var(--ptc-font-size-medium);\n  }\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh,\n.card-links .card-section .card-link .bgp {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 8;\n  opacity: 0;\n}\n.card-links .card-section .card-link .link-cover {\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 11;\n  width: 99%;\n  height: 99%;\n  border-radius: var(--ptc-border-radius-standard);\n  border: 2px solid transparent;\n}\n.card-links .card-section .card-link .bgb,\n.card-links .card-section .card-link .bgh {\n  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\n  backdrop-filter: blur(6px);\n  -webkit-backdrop-filter: blur(6px);\n}\n.card-links .card-section .card-link .bgb {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.07) 100.13%);\n  opacity: 1;\n}\n.card-links .card-section .card-link .bgh {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.17) 100.13%);\n}\n.card-links .card-section .card-link .bgp {\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.12) 100.13%);\n}\n.card-links .card-section .card-link:hover .bgb,\n.card-links .card-section .card-link:hover .bgp {\n  opacity: 0;\n}\n.card-links .card-section .card-link:hover .bgh {\n  opacity: 1;\n}\n.card-links .card-section .card-link:active .bgb,\n.card-links .card-section .card-link:active .bgh, .card-links .card-section .card-link.active .bgb,\n.card-links .card-section .card-link.active .bgh {\n  display: none;\n  opacity: 0;\n}\n.card-links .card-section .card-link:active .bgp, .card-links .card-section .card-link.active .bgp {\n  opacity: 1;\n}\n.card-links .card-section .card-link:focus-visible, .card-links .card-section .card-link:focus, .card-links .card-section .card-link:focus-within {\n  border-radius: var(--ptc-border-radius-standard);\n  outline: 5px solid var(--keyboard-nav-outline);\n  border-bottom-color: white;\n}\n.card-links .card-section .card-link:focus-visible .link-cover, .card-links .card-section .card-link:focus .link-cover, .card-links .card-section .card-link:focus-within .link-cover {\n  border-color: white;\n}\n.card-links .card-section:before {\n  position: absolute;\n  width: 32px;\n  background: linear-gradient(85deg, rgba(255, 255, 255, 0) 0%, white 100.13%);\n  top: 16px;\n  right: 0;\n  bottom: 0;\n  z-index: 12;\n}\n.card-links .card-section.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed {\n  box-shadow: inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n.card-links .card-section.scroll-ed.scroll-st {\n  box-shadow: inset 2px 0px 0px rgba(255, 255, 255, 0.3), inset -2px 0px 0px rgba(255, 255, 255, 0.3);\n}\n@media only screen and (min-width: 1200px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n    align-items: flex-start;\n    justify-content: flex-start;\n    align-content: flex-start;\n  }\n  .card-links .card-section.scroll-st, .card-links .card-section.scroll-ed, .card-links .card-section.scroll-ed.scroll-st {\n    box-shadow: unset;\n  }\n  .card-links .card-section .card-link {\n    flex: unset;\n  }\n  .card-links .card-section .card-link:first-child {\n    margin-left: 0;\n  }\n  .card-links .card-section .card-link:last-child {\n    margin-right: 0;\n  }\n}\n@media only screen and (min-width: 1440px) {\n  .card-links .card-section {\n    margin: 20px 0 0;\n  }\n}\n\n.card-section {\n  overflow-x: visible;\n  overflow-y: visible;\n  animation-duration: 0ms;\n  animation-delay: 1000ms;\n  animation-fill-mode: forwards;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section {\n    overflow-x: visible;\n  }\n}\n.card-section .card-link {\n  animation-duration: 750ms;\n  animation-delay: 0ms;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  transform: translate3d(0, 30%, 0);\n}\n.card-section .card-link.card-link-1 {\n  animation-delay: 0ms;\n}\n.card-section .card-link.card-link-2 {\n  animation-delay: 250ms;\n}\n.card-section .card-link.card-link-3 {\n  animation-delay: 500ms;\n}\n.card-section .card-link.card-link-4 {\n  animation-delay: 750ms;\n}\n.card-section.in-view {\n  animation-name: fadeUpInContainer;\n}\n@media only screen and (min-width: 1200px) {\n  .card-section.in-view {\n    overflow: visible !important;\n  }\n}\n.card-section.in-view .card-link {\n  animation-name: fadeUpIn;\n}\n\n@keyframes fadeUpIn {\n  0% {\n    opacity: 0;\n    transform: translate3d(0, 30%, 0);\n  }\n  100% {\n    opacity: 1;\n    transform: translateZ(0);\n  }\n}\n@keyframes fadeUpInContainer {\n  0% {\n    overflow: visible;\n    overflow-y: visible;\n    overflow-x: visible;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: visible;\n    }\n  }\n  100% {\n    overflow: inherit;\n    overflow-y: hidden;\n    overflow-x: scroll;\n    @media only screen and (min-width: 1200px) {\n      overflow-x: hidden;\n    }\n  }\n}";
 
 const PtcHomepageVideoBackground = class {
   constructor(hostRef) {
@@ -16,7 +16,7 @@ const PtcHomepageVideoBackground = class {
     this.playButtonTitle = undefined;
     this.pauseButtonTitle = undefined;
     this.playButtonTrackerId = undefined;
-    this.buttonLocation = 'bottom-right';
+    this.buttonLocation = "bottom-right";
     this.defer = false;
     this.links = undefined;
   }
@@ -26,21 +26,21 @@ const PtcHomepageVideoBackground = class {
       PreventAnchor: false,
       Timeout: undefined,
       StartX: 0,
-      ScrollLeft: 0
+      ScrollLeft: 0,
     };
     this.readLinkItems();
   }
   componentDidLoad() {
-    this.slider = this.el.shadowRoot.querySelector('.card-section');
+    this.slider = this.el.shadowRoot.querySelector(".card-section");
     //this.slider.addEventListener('scroll', () => this.onSliderScroll());
     //window.addEventListener('scroll', () => this.onSliderScroll());
     //this.onSliderScroll();
-    utils.observeInView(this.el, '.card-section', true);
+    utils.observeInView(this.el, ".card-section", true);
   }
   readLinkItems() {
     this.links = [];
-    const anchors = this.el.querySelectorAll('.card-cta-links > a');
-    anchors.forEach(a => {
+    const anchors = this.el.querySelectorAll(".card-cta-links > a");
+    anchors.forEach((a) => {
       let link = a;
       if (link && this.links.length < 4) {
         this.links.push(link);
@@ -58,17 +58,23 @@ const PtcHomepageVideoBackground = class {
     anchor && anchor.click();
   }
   onSliderScroll() {
-    if (this.slider.scrollLeft === 0 && this.slider.classList.contains('scroll-st')) {
-      this.slider.classList.remove('scroll-st');
+    if (this.slider.scrollLeft === 0 &&
+      this.slider.classList.contains("scroll-st")) {
+      this.slider.classList.remove("scroll-st");
     }
-    else if (this.slider.scrollLeft !== 0 && !this.slider.classList.contains('scroll-st')) {
-      this.slider.classList.add('scroll-st');
+    else if (this.slider.scrollLeft !== 0 &&
+      !this.slider.classList.contains("scroll-st")) {
+      this.slider.classList.add("scroll-st");
     }
-    if (this.slider.scrollLeft === (this.slider.scrollWidth - this.slider.offsetWidth) && this.slider.classList.contains('scroll-ed')) {
-      this.slider.classList.remove('scroll-ed');
+    if (this.slider.scrollLeft ===
+      this.slider.scrollWidth - this.slider.offsetWidth &&
+      this.slider.classList.contains("scroll-ed")) {
+      this.slider.classList.remove("scroll-ed");
     }
-    else if (this.slider.scrollLeft !== (this.slider.scrollWidth - this.slider.offsetWidth) && !this.slider.classList.contains('scroll-ed')) {
-      this.slider.classList.add('scroll-ed');
+    else if (this.slider.scrollLeft !==
+      this.slider.scrollWidth - this.slider.offsetWidth &&
+      !this.slider.classList.contains("scroll-ed")) {
+      this.slider.classList.add("scroll-ed");
     }
   }
   onLinkClick(e) {
@@ -86,7 +92,7 @@ const PtcHomepageVideoBackground = class {
   onSliderMouseDown(e, slider) {
     e.preventDefault();
     this.sliderSettings.IsMouseDown = true;
-    slider.classList.add('active');
+    slider.classList.add("active");
     this.sliderSettings.StartX = e.pageX - slider.offsetLeft;
     this.sliderSettings.ScrollLeft = slider.scrollLeft;
     this.sliderSettings.PreventAnchor = false;
@@ -95,7 +101,7 @@ const PtcHomepageVideoBackground = class {
     e.preventDefault();
     clearTimeout(this.sliderSettings.Timeout);
     this.sliderSettings.IsMouseDown = false;
-    slider.classList.remove('active');
+    slider.classList.remove("active");
   }
   onSliderMouseDrag(e, slider) {
     this.sliderSettings.Timeout = setTimeout(() => {
@@ -104,7 +110,7 @@ const PtcHomepageVideoBackground = class {
     if (this.sliderSettings.IsMouseDown) {
       e.preventDefault();
       const x = e.pageX - slider.offsetLeft;
-      const walk = (x - this.sliderSettings.StartX);
+      const walk = x - this.sliderSettings.StartX;
       slider.scrollLeft = this.sliderSettings.ScrollLeft - walk;
     }
   }
@@ -112,7 +118,7 @@ const PtcHomepageVideoBackground = class {
     if (e && e.currentTarget) {
       let anch = e.currentTarget;
       if (anch) {
-        anch.classList.add('active');
+        anch.classList.add("active");
       }
     }
   }
@@ -120,7 +126,7 @@ const PtcHomepageVideoBackground = class {
     if (e && e.currentTarget) {
       let anch = e.currentTarget;
       if (anch) {
-        anch.classList.remove('active');
+        anch.classList.remove("active");
         if (this.sliderSettings.IsMouseDown) {
           clearTimeout(this.sliderSettings.Timeout);
           this.sliderSettings.IsMouseDown = false;
@@ -130,26 +136,39 @@ const PtcHomepageVideoBackground = class {
   }
   componentDidRender() {
     let that = this;
-    this.el.shadowRoot.querySelectorAll('.card-link').forEach((div) => {
-      let a = div.querySelector('a');
-      a.addEventListener('click', (e) => { that.onLinkClick(e); });
-      div.addEventListener('mousedown', (e) => { that.onCardMouseDown(e); });
-      div.addEventListener('mouseup', (e) => { that.onCardMouseUp(e); });
-      div.addEventListener('mouseleave', (e) => { that.onCardMouseUp(e); });
-      div.addEventListener('touchend', (e) => { that.onCardMouseUp(e); });
+    this.el.shadowRoot
+      .querySelectorAll(".card-link")
+      .forEach((div) => {
+      let a = div.querySelector("a");
+      a.addEventListener("click", (e) => {
+        that.onLinkClick(e);
+      });
+      div.addEventListener("mousedown", (e) => {
+        that.onCardMouseDown(e);
+      });
+      div.addEventListener("mouseup", (e) => {
+        that.onCardMouseUp(e);
+      });
+      div.addEventListener("mouseleave", (e) => {
+        that.onCardMouseUp(e);
+      });
+      div.addEventListener("touchend", (e) => {
+        that.onCardMouseUp(e);
+      });
     });
   }
   render() {
-    return (index.h(index.Host, null, index.h("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": 'dark', "tracker-id": this.playButtonTrackerId, defer: this.defer, "poster-src": this.posterSrc }), index.h("div", { class: "ptc-container" }, index.h("div", { class: "primary-content-wrapper" }, index.h("slot", { name: "primary-content" })), index.h("div", { class: "card-links" }, index.h("div", { class: "secondary-content-wrapper" }, index.h("slot", { name: "secondary-content" })), index.h("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links && this.links.map((link, i) => {
-      const trackerId = link.getAttribute('data-tracker-id');
-      const icon = link.getAttribute('data-icon');
-      const target = link.getAttribute('target');
-      const title = link.getAttribute('title');
-      const text = link.textContent;
-      if (text) {
-        return (index.h("div", { id: trackerId, class: `card-link card-link-${i + 1}`, "tab-index": i + 1 }, index.h("div", { class: "bgb" }), index.h("div", { class: "bgh" }), index.h("div", { class: "bgp" }), index.h("a", { href: link.href, target: target, title: title, class: "link-cover" }), icon && index.h("icon-asset", { type: "ptc", size: "large", color: 'white', name: icon }), index.h("span", { class: "link-text hyphenate-text" }, text.trim())));
-      }
-    })))))));
+    return (index.h(index.Host, null, index.h("ptc-background-video", Object.assign({}, this.getBackgroundVideoSettings(), { "overlay-type": "dark", "tracker-id": this.playButtonTrackerId, defer: this.defer, "poster-src": this.posterSrc }), index.h("div", { class: "ptc-container" }, index.h("div", { class: "primary-content-wrapper" }, index.h("slot", { name: "primary-content" })), index.h("div", { class: "card-links" }, index.h("div", { class: "secondary-content-wrapper" }, index.h("slot", { name: "secondary-content" })), index.h("div", Object.assign({ class: "card-section" }, this.getSliderBindings()), this.links &&
+      this.links.map((link, i) => {
+        const trackerId = link.getAttribute("data-tracker-id");
+        const icon = link.getAttribute("data-icon");
+        const target = link.getAttribute("target");
+        const title = link.getAttribute("title");
+        const text = link.textContent;
+        if (text) {
+          return (index.h("div", { id: trackerId, class: `card-link card-link-${i + 1}`, "tab-index": i + 1 }, index.h("div", { class: "bgb" }), index.h("div", { class: "bgh" }), index.h("div", { class: "bgp" }), index.h("a", { href: link.href, target: target, title: title, class: "link-cover" }), icon && (index.h("icon-asset", { type: "ptc", size: "large", color: "white", name: icon })), index.h("span", { class: "link-text hyphenate-text" }, text.trim())));
+        }
+      })))))));
   }
   getBackgroundVideoSettings() {
     return {
@@ -159,15 +178,23 @@ const PtcHomepageVideoBackground = class {
       playButtonTitle: this.playButtonTitle,
       buttonLocation: this.buttonLocation,
       overlay: this.overlay,
-      class: 'bg-video'
+      class: "bg-video",
     };
   }
   getSliderBindings() {
     return {
-      onMouseDown: (e) => { this.onSliderMouseDown(e, this.slider); },
-      onMouseUp: (e) => { this.onSliderMouseExit(e, this.slider); },
-      onMouseLeave: (e) => { this.onSliderMouseExit(e, this.slider); },
-      onMouseMove: (e) => { this.onSliderMouseDrag(e, this.slider); }
+      onMouseDown: (e) => {
+        this.onSliderMouseDown(e, this.slider);
+      },
+      onMouseUp: (e) => {
+        this.onSliderMouseExit(e, this.slider);
+      },
+      onMouseLeave: (e) => {
+        this.onSliderMouseExit(e, this.slider);
+      },
+      onMouseMove: (e) => {
+        this.onSliderMouseDrag(e, this.slider);
+      },
     };
   }
   get el() { return index.getElement(this); }