{% require_css %}
<style>
  #hs_cos_wrapper_{{ name }} {
    {% if module.row_settings.shadow == 'outer' %}
      position: relative;
      z-index: 1;
    {% endif %} 
  }
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod {
    padding-top: {{ module.row_settings.adv_settings.padding_top }};
    padding-bottom:  {{ module.row_settings.adv_settings.padding_bottom }};
    background-color: {{ module.row_settings.bg_color.color }};
  }
  
   #hs_cos_wrapper_{{ name }} .inner-shadow {
    -webkit-box-shadow:inset 0 0 {{ module.row_settings.shadow_size }}px 1px rgba({{ module.row_settings.shadow_color.color|convert_rgb }},{% if module.row_settings.shadow_color.opacity == '100' %}1{% else %}0.{{ module.row_settings.shadow_color.opacity }}{% endif %});
    box-shadow:inset 0 0 {{ module.row_settings.shadow_size }}px 1px rgba({{ module.row_settings.shadow_color.color|convert_rgb }}, {% if module.row_settings.shadow_color.opacity == '100' %}1{% else %}0.{{ module.row_settings.shadow_color.opacity }}{% endif %});
  }

   #hs_cos_wrapper_{{ name }} .outer-shadow {
   -webkit-box-shadow: 0 0 {{ module.row_settings.shadow_size }}px 1px rgba({{ module.row_settings.shadow_color.color|convert_rgb }}, {% if module.row_settings.shadow_color.opacity == '100' %}1{% else %}0.{{ module.row_settings.shadow_color.opacity }}{% endif %});
    box-shadow: 0 0 {{ module.row_settings.shadow_size }}px 1px rgba({{ module.row_settings.shadow_color.color|convert_rgb }}, {% if module.row_settings.shadow_color.opacity == '100' %}1{% else %}0.{{ module.row_settings.shadow_color.opacity }}{% endif %});   
    z-index: 1;
    position: relative;
  }
  
  #hs_cos_wrapper_{{ name }} .tick i.fa-check {color: {{ module.style.icons.check_color.color }};}
  #hs_cos_wrapper_{{ name }} .tick i.fa-times {color: {{ module.style.icons.times_color.color }};}
  #hs_cos_wrapper_{{ name }} .tick span.na {color: {{ module.style.icons.na_color.color }}; font-weight: bold;font-size: 14px;}
  #hs_cos_wrapper_{{ name }} .cta-primary,
  #hs_cos_wrapper_{{ name }} .cta-secondary {padding-left: 18px; padding-right: 18px;}
  
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod button,
  #hs_cos_wrapper_{{ name }} .pack-title th,
  #hs_cos_wrapper_{{ name }} .pack-feature{
   {% if module.style.text.custom_text_color %}
    color: {{ module.style.text.text_color.color }};
   {% endif %}
  }
  #hs_cos_wrapper_{{ name }} .pack-price .txt-top,
  #hs_cos_wrapper_{{ name }} .pack-price .txt-l{
   {% if module.style.text.custom_text_color %}
    color: {{ module.style.text.price_color.color }};
   {% endif %}
  }
  #hs_cos_wrapper_{{ name }} .pack-price .txt-l{
    font-size: {{ module.style.text.price_size }}px;
    line-height: {{ module.style.text.price_size + 4 }}px;
    font-weight: {{ module.style.text.price_font_weight }};
  }
  
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod .pre-text,
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod .post-text {
    color:  {{ module.style.text.sub_price_text_color.color }};
    font-size: 14px;
  }
  
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod th { background-color: {{ module.style.table.title_bg_color.color }}; }
  #hs_cos_wrapper_{{ name }} .sep {background-color: {{ module.style.table.section_title_bg_color.color }};}
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod button {
    border: 1px solid {{ module.style.table.border_color.color }};
    background-color: {{ module.style.table.title_bg_color.color }} ;
  }
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod li:last-child {
    border-right:1px solid {{ module.style.table.border_color.color }};
  }  
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod td, #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod th {
    border:1px solid {{ module.style.table.border_color.color }}; 
  }
  #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod li.active button {
   background-color: {{ module.style.table.title_bg_color_active.color }}; 
  }
  
   /*** TOOLTIP STYLE OPTIONS ***/
  
  #hs_cos_wrapper_{{ name }} .tooltip-wrapper .tooltip{
   border-color:  {{ module.style.tooltip.accent_color.color }};
   color: {{ module.style.tooltip.text_color.color }};
  }
  #hs_cos_wrapper_{{ name }} .tooltip-wrapper .tooltip:after{
   border-top: solid 10px  {{ module.style.tooltip.accent_color.color }};
   color: {{ module.style.tooltip.text_color.color }};
  }
  
   /*** TOGGLE STYLE OPTIONS ***/
  
  {% if module.start.price_toggle %}
    #hs_cos_wrapper_{{ name }} .toggler-label-right,
    #hs_cos_wrapper_{{ name }} .toggler-label-left {
      color: {{ module.style.toggle.toggle_label_color.color }};
      font-weight: {{ module.style.toggle.toggle_label_weight }};
    }

    #hs_cos_wrapper_{{ name }} .tgl-ios + .tgl-btn {
      border: 2px solid {{ module.style.toggle.toggle_color.color }};
    }
    #hs_cos_wrapper_{{ name }} .tgl-ios + .tgl-btn:after {
      background: {{ module.style.toggle.toggle_color.color }}; 
    }
    #hs_cos_wrapper_{{ name }} .hhs-toggle-price .wrapper {
      margin-bottom: 50px;
    }
  {% endif %}
  
    /** TABLET CSS **/
  @media (max-width: 768px) {
    #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod {
      padding-top: {{ module.row_settings.adv_settings.padding_top_tablet }};
      padding-bottom: {{ module.row_settings.adv_settings.padding_bottom_tablet }};
    }
  }
  
  /** MOBILE CSS **/
  @media (max-width: 575px) {
    #hs_cos_wrapper_{{ name }} .hhs-price-compare-mod {
      padding-top: {{ module.row_settings.adv_settings.padding_top_mobile }};
      padding-bottom: {{ module.row_settings.adv_settings.padding_bottom_mobile }};
    }
  }
</style>
{% end_require_css %}


{% if module.start.num_cols == "2" %}   
  {% set colspan = "3" %}
{% endif %}
{% if module.start.num_cols == "3" %}   
  {% set colspan = "4" %}
{% endif %}
{% if module.start.num_cols == "4" %}   
  {% set colspan = "5" %}
{% endif %}
{% if module.start.num_cols == "5" %}   
  {% set colspan = "6" %}
{% endif %}
{% if module.start.num_cols == "6" %}   
  {% set colspan = "7" %}
{% endif %}
{% if module.start.num_cols == "7" %}   
  {% set colspan = "8" %}
{% endif %}



{% require_js %}
<script>

  // Responsive pricing table JS

$( "ul" ).on( "click", "li", function() {
  var pos = $(this).index()+2;
  $("tr").find('td:not(:eq(0))').hide();
  $('td:nth-child('+pos+')').css('display','table-cell');
  $("tr").find('th:not(:eq(0))').hide();
  $('li').removeClass('active');
  $(this).addClass('active');
});
// Initialize the media query
  var mediaQuery = window.matchMedia('(min-width: 768px)');
  
  // Add a listen event
  mediaQuery.addListener(doSomething);
    // Function to do something with the media query
  function doSomething(mediaQuery) {    
    if (mediaQuery.matches) {
      $('.sep').attr('colspan',{{ colspan }});
    } else {
      $('.sep').attr('colspan',2);
    }
  }
  
  // On load
  doSomething(mediaQuery);
  
{% if module.start.price_toggle %}
    $(".tgl:checkbox").click(function() {
      var href1 = $($(this).attr('data-on'));
      var href2 = $($(this).attr('data-off'));
      $('.wrap').css('opacity', '0');
      setTimeout(function(){
        $('.wrap').css('opacity', '1');
      },250);
        if ( $( this ).prop( "checked" ) ) {
          setTimeout(function(){
            href1.hide();
            href2.show();
          },250)
        } else {
          setTimeout(function(){
            href2.hide();
            href1.show();
          },250)
        }
    });
{% endif %}
</script>
{% end_require_js %}





<div id="{{ module.row_settings.code.section_id }}" class="hhs-price-compare-mod {% if module.row_settings.visibility.vis_phone %}show-mobile{% else %}hide-mobile{% endif %} {% if module.row_settings.visibility.vis_tablet %}show-tablet{% else %}hide-tablet{% endif %} {% if module.row_settings.visibility.vis_desktop %}show-desktop{% else %}hide-desktop{% endif %}  {% if module.row_settings.shadow == 'inner' %}inner-shadow{% endif %} {% if module.row_settings.shadow == 'outer' %}outer-shadow{% endif %} {{ module.row_settings.code.section_class }}">
  <div class="{{ module.row_settings.content_width }}" style="{% if module.row_settings.content_width == 'custom' %} max-width: {{ module.row_settings.set_width }}px; margin: auto;{% endif %}">
    <div class="row">
      {% if module.start.price_toggle %}
        <div class="hhs-toggle-price col-12">
          <div class="wrapper">
            <span class="toggler-label-left">{{ module.start.toggle_1 }}</span>
            <div class="toggler">
              <input type="checkbox" id="checkbox1" data-on=".price1" data-off=".price2" class="tgl tgl-ios"/>
              <label for="checkbox1" class="tgl-btn"></label>
            </div>
            <span class="toggler-label-right">{{ module.start.toggle_2 }}</span>
          </div>
        </div>
        {% endif %}
      <div class="col-12">
        <article>
          <ul>
            <li style="border-top: 3px solid {{ module.content.package_1.highlight_color.color }};">
              <button>{{ module.content.package_1.title }}</button>
            </li>
            <li class="active" style="border-top: 3px solid {{ module.content.package_2.highlight_color.color }};">
              <button>{{ module.content.package_2.title }}</button>
            </li>
            {% if module.start.num_cols >= '3' %}
              <li style="border-top: 3px solid {{ module.content.package_3.highlight_color.color }};">
                <button>{{ module.content.package_3.title }}</button>
              </li>
            {% endif %}
            {% if module.start.num_cols >= '4' %}
              <li  style="border-top: 3px solid {{ module.content.package_4.highlight_color.color }};">
                <button>{{ module.content.package_4.title }}</button>
              </li>
            {% endif %}
            {% if module.start.num_cols == '5' %}
              <li style="border-top: 3px solid {{ module.content.package_5.highlight_color.color }};">
                <button>{{ module.content.package_5.title }}</button>
              </li>
            {% endif %}
            {% if module.start.num_cols == '6' %}
              <li style="border-top: 3px solid {{ module.content.package_6.highlight_color.color }};">
                <button>{{ module.content.package_6.title }}</button>
              </li>
            {% endif %}
            {% if module.start.num_cols == '7' %}
              <li style="border-top: 3px solid {{ module.content.package_7.highlight_color.color }};">
                <button>{{ module.content.package_7.title }}</button>
              </li>
            {% endif %}
          </ul>  

          <table>
            <thead>
              <tr class="pack-title">
                <th class="hide-cell"></th>
                <th style="border-top: 3px solid {{ module.content.package_1.highlight_color.color }};">{{ module.content.package_1.title }}</th>
                <th class="default" style="border-top: 3px solid {{ module.content.package_2.highlight_color.color }};">{{ module.content.package_2.title }}</th>
                {% if module.start.num_cols >= '3' %}
                  <th style="border-top: 3px solid {{ module.content.package_3.highlight_color.color }};">{{ module.content.package_3.title }}</th>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <th style="border-top: 3px solid {{ module.content.package_4.highlight_color.color }};">{{ module.content.package_4.title }}</th>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <th style="border-top: 3px solid {{ module.content.package_5.highlight_color.color }};">{{ module.content.package_5.title }}</th>
                {% endif %}
                {% if module.start.num_cols == '6' %}
                  <th style="border-top: 3px solid {{ module.content.package_6.highlight_color.color }};">{{ module.content.package_6.title }}</th>
                {% endif %}
                 {% if module.start.num_cols == '7' %}
                  <th style="border-top: 3px solid {{ module.content.package_7.highlight_color.color }};">{{ module.content.package_7.title }}</th>
                {% endif %}
              </tr>
            </thead>
            <tbody>
              <tr class="pack-price">
                <td class="pack-feature">{{ module.start.price_row_title }}</td>
                <td>
                  <span class="pre-text {% if module.content.package_1.strike %}strike{% endif %}">{{ module.content.package_1.price_pre_text }}</span><br/>
                  <span class="wrap">
                    <span class="price1">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_1.price }}</span><br/>
                    </span>
                    <span class="price2">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_1.price_2 }}</span><br/>
                    </span>
                  </span>
                  <span class="post-text">{{ module.content.package_1.price_post_text }}</span>
                </td>
                <td class="default">
                  <span class="pre-text {% if module.content.package_2.strike %}strike{% endif %}">{{ module.content.package_2.price_pre_text }}</span><br/>
                  <span class="wrap">
                    <span class="price1">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_2.price }}</span><br/>
                    </span>
                    <span class="price2">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_2.price_2 }}</span><br/>
                    </span>
                  </span>
                  <span class="post-text">{{ module.content.package_2.price_post_text }}</span>
                </td>
                {% if module.start.num_cols >= '3' %}
                  <td>
                    <span class="pre-text {% if module.content.package_3.strike %}strike{% endif %}">{{ module.content.package_3.price_pre_text }}</span><br/>
                  <span class="wrap">
                    <span class="price1">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_3.price }}</span><br/>
                    </span>
                    <span class="price2">
                      <span class="txt-top">{{ module.start.currency }}</span>
                      <span class="txt-l">{{ module.content.package_3.price_2 }}</span><br/>
                    </span>
                  </span>
                  <span class="post-text">{{ module.content.package_3.price_post_text }}</span>
                </td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td>
                    <span class="pre-text {% if module.content.package_4.strike %}strike{% endif %}">{{ module.content.package_4.price_pre_text }}</span><br/>
                    <span class="wrap">
                      <span class="price1">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_4.price }}</span><br/>
                      </span>
                      <span class="price2">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_4.price_2 }}</span><br/>
                      </span>
                    </span>
                    <span class="post-text">{{ module.content.package_4.price_post_text }}</span>
                </td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td>
                    <span class="pre-text {% if module.content.package_5.strike %}strike{% endif %}">{{ module.content.package_5.price_pre_text }}</span><br/>
                    <span class="wrap">
                      <span class="price1">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_5.price }}</span><br/>
                      </span>
                      <span class="price2">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_5.price_2 }}</span><br/>
                      </span>
                    </span>
                    <span class="post-text">{{ module.content.package_5.price_post_text }}</span>
                </td>
                {% endif %}
                     {% if module.start.num_cols == '6' %}
                  <td>
                    <span class="pre-text {% if module.content.package_6.strike %}strike{% endif %}">{{ module.content.package_6.price_pre_text }}</span><br/>
                    <span class="wrap">
                      <span class="price1">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_6.price }}</span><br/>
                      </span>
                      <span class="price2">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_6.price_2 }}</span><br/>
                      </span>
                    </span>
                    <span class="post-text">{{ module.content.package_6.price_post_text }}</span>
                </td>
                {% endif %}
                {% if module.start.num_cols == '7' %}
                  <td>
                    <span class="pre-text {% if module.content.package_7.strike %}strike{% endif %}">{{ module.content.package_7.price_pre_text }}</span><br/>
                    <span class="wrap">
                      <span class="price1">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_7.price }}</span><br/>
                      </span>
                      <span class="price2">
                        <span class="txt-top">{{ module.start.currency }}</span>
                        <span class="txt-l">{{ module.content.package_7.price_2 }}</span><br/>
                      </span>
                    </span>
                    <span class="post-text">{{ module.content.package_7.price_post_text }}</span>
                </td>
                {% endif %}
              </tr>
              <tr>
                <td colspan="{{ colspan }}" class="sep pack-feature">{{ module.feature_section_1.title }}</td>
              </tr>
             {% for item in module.feature_section_1.feature_row %}
              <tr>
                <td class="pack-feature">{{ item.feature }} {% if item.tooltip %}<div onclick="" class="tooltip-wrapper"><i class="far fa-question-circle"></i><div class="tooltip">{{ item.extra_info }}</div></div>{% endif %}</td>
                <td><span class="tick">{% if item.package_1 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_1 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                <td class="default"><span class="tick">{% if item.package_2 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_2 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% if module.start.num_cols >= '3' %}
                  <td ><span class="tick">{% if item.package_3 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_3 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td><span class="tick">{% if item.package_4 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_4 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td><span class="tick">{% if item.package_5 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_5 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                 {% if module.start.num_cols == '6' %}
                  <td><span class="tick">{% if item.package_6 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_6 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                  {% if module.start.num_cols == '7' %}
                  <td><span class="tick">{% if item.package_7 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_7 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
              </tr>
              {% endfor %}

              {% if module.feat_section_2_on == 'true' %} 
              <tr>
                <td colspan="{{ colspan }}" class="sep pack-feature">{{ module.feature_section_2.title }}</td>
              </tr>
              {% for item in module.feature_section_2.feature_row %}
              <tr>
                <td class="pack-feature">{{ item.feature }} {% if item.tooltip %}<div onclick="" class="tooltip-wrapper"><i class="far fa-question-circle"></i><div class="tooltip">{{ item.extra_info }}</div></div>{% endif %}</td>
                <td><span class="tick">{% if item.package_1 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_1 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                <td class="default"><span class="tick">{% if item.package_2 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_2 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% if module.start.num_cols >= '3' %}
                  <td><span class="tick">{% if item.package_3 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_3 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td><span class="tick">{% if item.package_4 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_4 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td><span class="tick">{% if item.package_5 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_5 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                 {% if module.start.num_cols == '6' %}
                  <td><span class="tick">{% if item.package_6 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_6 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '7' %}
                  <td><span class="tick">{% if item.package_7 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_7 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
              </tr>
              {% endfor %}
              {% endif %}

              {% if module.feat_section_3_on %}
              <tr>
                <td colspan="{{ colspan }}" class="sep pack-feature">{{ module.feature_section_3.title }}</td>
              </tr>
              {% for item in module.feature_section_3.feature_row %}
              <tr>
                <td class="pack-feature">{{ item.feature }} {% if item.tooltip %}<div onclick="" class="tooltip-wrapper"><i class="far fa-question-circle"></i><div class="tooltip">{{ item.extra_info }}</div></div>{% endif %}</td>
                <td><span class="tick">{% if item.package_1 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_1 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                <td class="default"><span class="tick">{% if item.package_2 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_2 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% if module.start.num_cols >= '3' %}
                  <td><span class="tick">{% if item.package_3 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_3 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td><span class="tick">{% if item.package_4 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_4 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td><span class="tick">{% if item.package_5 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_5 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                 {% if module.start.num_cols >= '6' %}
                  <td><span class="tick">{% if item.package_6 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_6 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '7' %}
                  <td><span class="tick">{% if item.package_7 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_7 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
              </tr>
              {% endfor %}
              {% endif %}

              {% if module.feat_section_4_on %}
              <tr>
                <td colspan="{{ colspan }}" class="sep pack-feature">{{ module.feature_section_4.title }}</td>
              </tr>
              {% for item in module.feature_section_4.feature_row %}
              <tr>
                <td class="pack-feature">{{ item.feature }} {% if item.tooltip %}<div onclick="" class="tooltip-wrapper"><i class="far fa-question-circle"></i><div class="tooltip">{{ item.extra_info }}</div></div>{% endif %}</td>
                <td><span class="tick">{% if item.package_1 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_1 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                <td class="default"><span class="tick">{% if item.package_2 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_2 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% if module.start.num_cols >= '3' %}
                  <td><span class="tick">{% if item.package_3 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_3 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td><span class="tick">{% if item.package_4 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_4 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td><span class="tick">{% if item.package_5 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_5 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                 {% if module.start.num_cols >= '6' %}
                  <td><span class="tick">{% if item.package_6 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_6 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '7' %}
                  <td><span class="tick">{% if item.package_7 == 'yes' %}<i class="fas fa-check"></i>{% elif item.package_7 == 'no' %}<i class="fas fa-times"></i>{% else %}<span class="na">N/A</span>{% endif %}</span></td>
                {% endif %}
              </tr>
              {% endfor %}
              {% endif %}

              <tr>
                <td style="border: none;">&nbsp;</td>
                <td><span class="cta-con">{% cta guid="{{ module.content.package_1.cta }}" %}</span></td>
                <td class="default"><span class="cta-con">{% cta guid="{{ module.content.package_2.cta }}" %}</span></td>
                {% if module.start.num_cols >= '3' %}
                  <td><span class="cta-con">{% cta guid="{{ module.content.package_3.cta }}" %}</span></td>
                {% endif %}
                {% if module.start.num_cols >= '4' %}
                  <td><span class="cta-con">{% cta guid="{{ module.content.package_4.cta }}" %}</span></td>
                {% endif %}
                {% if module.start.num_cols == '5' %}
                  <td><span class="cta-con">{% cta guid="{{ module.content.package_5.cta }}" %}</span></td>
                {% endif %}
                 {% if module.start.num_cols == '6' %}
                  <td><span class="cta-con">{% cta guid="{{ module.content.package_6.cta }}" %}</span></td>
                {% endif %}
                   {% if module.start.num_cols == '7' %}
                  <td><span class="cta-con">{% cta guid="{{ module.content.package_7.cta }}" %}</span></td>
                {% endif %}
              </tr>
            </tbody>
          </table>
        </article>
      </div>
    </div>
  </div>
</div>


<!-- CSS module-->


.hhs-price-compare-mod .pre-text.strike {
 text-decoration: line-through; 
}

.hhs-price-compare-mod  article {
  width:100%;
  margin:0 auto;
  position:relative;
}
.hhs-price-compare-mod ul {
  display:flex;
  top:0px;
  padding-left: 0px;
  z-index:10;
  padding-bottom:0px;
}
.hhs-price-compare-mod li {
  list-style:none;
  flex:1;
}

.hhs-price-compare-mod button {
  width:100%;
  border-right:0;
  border-top:0;
  padding: 10px;
  font-size:14px;
  font-weight:bold;
  height:60px;
}
.hhs-price-compare-mod button:focus {outline: none;}
.hhs-price-compare-mod li.active button {
  color:#000;
}
.hhs-price-compare-mod table { border-collapse:collapse; table-layout:fixed; width:100%; }

.hhs-price-compare-mod td, .hhs-price-compare-mod th {
  height:53px
}
.hhs-price-compare-mod td, .hhs-price-compare-mod th { padding:10px; empty-cells:show; }
.hhs-price-compare-mod td, .hhs-price-compare-mod th {
  text-align:left;
}
.hhs-price-compare-mod td+td, .hhs-price-compare-mod th+th {
  text-align:center;
  display:none;
}
.hhs-price-compare-mod td.default {
  display:table-cell;
}

.hhs-price-compare-mod th.hide-cell {background-color: transparent !important; border: none !important; display: none;}

.sep {
  font-weight:bold;
}
.txt-l { font-size:28px; font-weight:bold; }
.txt-top { position:relative; top:-9px; left:4px; }
.tick { font-size:18px;  }
.hhs-price-compare-mod .hide-cell {
  border:0;
  background:none;
}


@media (min-width: 768px) {
  .hhs-price-compare-mod ul {
    display:none;
  }
  .hhs-price-compare-mod td, .hhs-price-compare-mod th {
    display:table-cell !important;
  }
  .hhs-price-compare-mod td, .hhs-price-compare-mod th {
    width: 230px;
  
  }
  .hhs-price-compare-mod td+td, .hhs-price-compare-mod th+th {
    width: auto;
  }
}


.tooltip-wrapper {
  display: inline-block;
  cursor: help;
  font-size: 14px;
  position: relative;
  -webkit-transform: translateZ(0); /* webkit flicker fix */
  -webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}

.tooltip-wrapper i {
 font-size: 14px; 
}

.tooltip-wrapper .tooltip {
  background: #fff;
  bottom: 100%;
  display: block;
  left: -25px;
  margin-bottom: 15px;
  border-bottom: 3px solid;
  opacity: 0;
  padding: 20px;
  pointer-events: none;
  position: absolute;
  width: 250px;
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}

/* This bridges the gap so you can mouse into the tooltip without it disappearing */
.tooltip-wrapper .tooltip:before {
  bottom: -20px;
  content: " ";
  display: block;
  height: 20px;
  left: 0;
  position: absolute;
  width: 100%;
}  

/* CSS Triangles - see Trevor's post */
.tooltip-wrapper .tooltip:after {
  border-left: solid transparent 10px;
  border-right: solid transparent 10px;
  bottom: -10px;
  content: " ";
  height: 0;
  left: 36px;
  margin-left: -13px;
  position: absolute;
  width: 0;
}
  
.tooltip-wrapper:hover .tooltip {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: translateY(0px);
     -moz-transform: translateY(0px);
      -ms-transform: translateY(0px);
       -o-transform: translateY(0px);
          transform: translateY(0px);
}

/* IE can just show/hide with no transition */
.lte8 .tooltip-wrapper .tooltip {
  display: none;
}

.lte8 .tooltip-wrapper:hover .tooltip {
  display: block;
}


<!-- Js.module -->
(function() {
  $("*").on( 'touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;