Drupal Commerce CC Field not accessible

Hi and thanks for this super theme!! :D

I have installed Drupal Commerce 2 with D8 and when I go to checkout with a credit card, the fields for the cc are not available to type information into. See attached screenshot. I cross-checked this with the default D8 theme and the CC fields are accessible.

Thank you for any suggestion on how to allow the Commerce CC fields to be input with w3css theme.

Here is the html source around the field when output by the w3css theme:

<div id="edit-payment-information-add-payment-method-payment-details-card-number" class="w3-section js-form-item form-item js-form-type-item form-type-item js-form-item-payment-information-add-payment-method-payment-details-card-number form-item-payment-information-add-payment-method-payment-details-card-number">
      <label class="js-form-required form-required" for="edit-payment-information-add-payment-method-payment-details-card-number">The card number</label>
        <div id="card-number-element" class="form-text"></div>
        </div>
<div id="edit-payment-information-add-payment-method-payment-details-expiration" class="w3-section js-form-item form-item js-form-type-item form-type-item js-form-item-payment-information-add-payment-method-payment-details-expiration form-item-payment-information-add-payment-method-payment-details-expiration">
      <label class="js-form-required form-required" for="edit-payment-information-add-payment-method-payment-details-expiration">Expiration date</label>
        <div id="expiration-element"></div>
        </div>
<div id="edit-payment-information-add-payment-method-payment-details-security-code" class="w3-section js-form-item form-item js-form-type-item form-type-item js-form-item-payment-information-add-payment-method-payment-details-security-code form-item-payment-information-add-payment-method-payment-details-security-code">
      <label class="js-form-required form-required" for="edit-payment-information-add-payment-method-payment-details-security-code">CVC</label>
        <div id="security-code-element"></div>
        </div>

      <div id="payment-information-add-payment-method-billing-information-address-0-address-ajax-wrapper"><div class="w3-section js-form-item form-item js-form-type-select form-type-select js-form-item-payment-information-add-payment-method-billing-information-address-0-address-country-code form-item-payment-information-add-payment-method-billing-information-address-0-address-country-code">
      <label for="edit-payment-information-add-payment-method-billing-information-address-0-address-country-code--2" class="js-form-required form-required">Country</label>

[...]

<input data-drupal-selector="edit-payment-information-add-payment-method-billing-information-address-0-address-langcode" type="hidden" name="payment_information[add_payment_method][billing_information][address][0][address][langcode]" class="w3-input w3-border w3-theme-border" />
<div class="w3-section js-form-item form-item js-form-type-textfield form-type-textfield js-form-item-payment-information-add-payment-method-billing-information-address-0-address-given-name form-item-payment-information-add-payment-method-billing-information-address-0-address-given-name">
      <label for="edit-payment-information-add-payment-method-billing-information-address-0-address-given-name" class="js-form-required form-required">First name</label>
        <input class="given-name form-text required w3-input w3-border w3-theme-border" autocomplete="given-name" data-drupal-selector="edit-payment-information-add-payment-method-billing-information-address-0-address-given-name" type="text" id="edit-payment-information-add-payment-method-billing-information-address-0-address-given-name" name="payment_information[add_payment_method][billing_information][address][0][address][given_name]" value="" size="25" maxlength="128" required="required" aria-required="true" />