{% if form.has_background_image and form.has_background_image == 'true' %}
<style>
    :root {
        {% if form.background_image.image_desktop and form.background_image.image_desktop != '' %}
            --survey_bg_d: url({{global.path}}/{{form.background_image.image_desktop}});
        {% endif %}

        {% if form.background_image.image_tablet and form.background_image.image_tablet != '' %}
            --survey_bg_t: url({{global.path}}/{{form.background_image.image_tablet}});
        {% endif %}
        
        {% if form.background_image.image_mobile and form.background_image.image_mobile != '' %}
            --survey_bg_m: url({{global.path}}/{{form.background_image.image_mobile}});
        {% endif %}
    }
</style>
{% endif %}

<section class="survey-wrap">
    {% if form.banner.show == 'true' %}
        <section class="banner">
            <div class="container">
                {{form.banner.content}}
            </div>
        </section>
    {% endif %}
    
    <div id="surveyForm" class="survey one">
        {% if form.showProgressBar == 'true' %}
            {% from "../_progressBar/_progressBar.html" import progressBar %}
            {{ progressBar (
                id='formProgressBar',
                showPercentage='false'
            )
            }}
        {% endif %}
        <div id="pagination" class="pagination"></div>
        {% if form.mainTitle and form.mainTitle != '' %}
            <h1>{{ form.mainTitle }}</h1>
        {% endif %}
        <form class="boxes">
            <div class="box one {% if form.firstSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.firstSection.firstSection2QuestionSection.splitQuestion and form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                <div class="pages">1 of {% if form.sectionsLength_options.selected == 'six_sections' %} 6 {% else %} 3 {% endif %}</div>
                
                {% if form.firstSection.firstSectionVsl.showVideo == 'true' and form.firstSection.firstSectionVsl.brightcoveVideoStorage != '' %}
                    {% from "../_vsl/_vsl.html" import vsl %}
                    {{ vsl(
                        brightcoveVideoStorage = form.firstSection.firstSectionVsl.brightcoveVideoStorage,
                        brightcoveAccountID = "6415681346001",
                        brightcoveVideoID = form.firstSection.firstSectionVsl.brightcoveVideoID,
                        customPlay = form.firstSection.firstSectionVsl.customPlay,
                        ID = 'firstSectionVsl',
                        path = global.path,
                        placeholder = form.firstSection.firstSectionVsl.placeholder,
                        placeholder_desktop = form.firstSection.firstSectionVsl.placeholder_desktop,
                        alt = form.firstSection.firstSectionVsl.alt,
                        hasControls = form.firstSection.firstSectionVsl.hasControls,
                        hidePlay = form.firstSection.firstSectionVsl.hidePlay,
                        isMutedAndAutoplay = form.firstSection.firstSectionVsl.isMutedAndAutoplay, 
                        customProgressBar = form.firstSection.firstSectionVsl.customProgressBar )
                    }}
                {% endif %}
                
                <h2 data-title="{{ form.firstSection.subject }}" class="question">{{ form.firstSection.title }}</h2>

                {% if form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' and form.firstSection.firstSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.firstSection.firstSection2QuestionSection.firstTitle}}</h3>
                {% endif %}

                <ul class="answers answer1" {% if form.firstSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.firstSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.firstSection.firstSectionItems %} {% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.firstSection.firstSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.firstSection.firstSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.firstSection.firstSectionColumnsAmount.mobile}};"{% endif %} {% endfor %}>
                    {% for items in form.firstSection.firstSectionItems %}
                    <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.firstSection.firstSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-one{% endif %}">
                        {% if form.firstSection.showItemsIcon and form.firstSection.showItemsIcon == 'true' %} 
                        <svg class="icon icon--{{ form.firstSection.subject | lower }}">
                            <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.value | upper }}" />
                        </svg>
                        {% endif %}

                        <input {% if form.firstSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.firstSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}" name="{% if form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.firstSection.subject }}"
                            id="{% if form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.firstSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.firstSection.firstSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                        {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.firstSection.subject | lower }}">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                        {% endif %}
                        <label
                            for="{% if form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.firstSection.subject | replace(' ', '') }}{{loop.index}}"
                            class="question-type-radio">{{ items.value }}</label>
                        <span class="label">{{ items.value }}</span>
                    </li>
                    {% endfor %}
                </ul>

                {% if form.firstSection.firstSection2QuestionSection.splitQuestion == 'true' %}
                    {% if form.firstSection.firstSection2QuestionSection.secondTitle != '' %}
                    <h3 class="subtitle">{{form.firstSection.firstSection2QuestionSection.secondTitle}}</h3>
                    {% endif %}

                    <ul class="answers answer2" {% if form.firstSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.firstSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.firstSection.firstSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.firstSection.firstSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.firstSection.firstSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.firstSection.firstSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.firstSection.firstSectionItemsSecond %}
                        <li class="answers__item">
                            <input {% if form.firstSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.firstSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="answer2{{ form.firstSection.subject }}"
                                id="answer2{{ form.firstSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.firstSection.firstSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.firstSection.subject | lower }}-answer2">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="answer2{{ form.firstSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solidColor' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %} {% if  global.custom_gtm_conversions.apply_custom_conversion == 'true' %}gtm-proceed-one{% endif %}">{{global.proceedBtn}}</div>
                {% endif %}
            </div>

            <div class="box two {% if form.secondSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.secondSection.secondSection2QuestionSection.splitQuestion and form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                <div class="pages">2 of {% if form.sectionsLength_options.selected == 'six_sections' %} 6 {% else %} 3 {% endif %}</div>
                
                {% if form.secondSection.secondSectionVsl.showVideo == 'true' and form.secondSection.secondSectionVsl.brightcoveVideoStorage != '' %}
                    {% from "../_vsl/_vsl.html" import vsl %}
                    {{ vsl(
                        brightcoveVideoStorage = form.secondSection.secondSectionVsl.brightcoveVideoStorage,
                        brightcoveAccountID = "6415681346001",
                        brightcoveVideoID = form.secondSection.secondSectionVsl.brightcoveVideoID,
                        customPlay = form.secondSection.secondSectionVsl.customPlay,
                        ID = 'secondSectionVsl',
                        path = global.path,
                        placeholder = form.secondSection.secondSectionVsl.placeholder,
                        placeholder_desktop = form.secondSection.secondSectionVsl.placeholder_desktop,
                        alt = form.secondSection.secondSectionVsl.alt,
                        hasControls = form.secondSection.secondSectionVsl.hasControls,
                        hidePlay = form.secondSection.secondSectionVsl.hidePlay,
                        isMutedAndAutoplay = form.secondSection.secondSectionVsl.isMutedAndAutoplay, 
                        customProgressBar = form.secondSection.secondSectionVsl.customProgressBar )
                    }}
                {% endif %}

                <h2 data-title="{{ form.secondSection.subject }}" class="question">{{ form.secondSection.title }}</h2>

                {% if form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' and form.secondSection.secondSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.secondSection.secondSection2QuestionSection.firstTitle}}</h3>
                {% endif %}

                <ul class="answers answer1" {% if form.secondSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.secondSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.secondSection.secondSectionItems %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.secondSection.secondSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.secondSection.secondSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.secondSection.secondSectionColumnsAmount.mobile}};"{% endif %}{% endfor %}>
                    {% for items in form.secondSection.secondSectionItems %}
                    <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.secondSection.secondSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-two{% endif %}">
                        <input {% if form.secondSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.secondSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                            name="{% if form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.secondSection.subject }}"
                            id="{% if form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.secondSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.secondSection.secondSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                        {% if items.icon and items.icon != '' %}
                        <svg class="icon icon--{{ form.secondSection.subject | lower }}">
                            <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                        </svg>
                        {% endif %}
                        <label for="{% if form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.secondSection.subject | replace(' ', '') }}{{loop.index}}"
                            class="question-type-radio">{{ items.value }}</label>
                        <span class="label">{{ items.value }}</span>
                    </li>
                    {% endfor %}
                </ul>

                {% if form.secondSection.secondSection2QuestionSection.splitQuestion == 'true' %}
                    {% if form.secondSection.secondSection2QuestionSection.secondTitle != '' %}
                    <h3 class="subtitle">{{form.secondSection.secondSection2QuestionSection.secondTitle}}</h3>
                    {% endif %}

                    <ul class="answers answer2" {% if form.secondSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.secondSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %}{% for items in form.secondSection.secondSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.secondSection.secondSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.secondSection.secondSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.secondSection.secondSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.secondSection.secondSectionItemsSecond %}
                        <li class="answers__item">
                            <input {% if form.secondSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.secondSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="answer2{{ form.secondSection.subject }}"
                                id="answer2{{ form.secondSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.secondSection.secondSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.secondSection.subject | lower }}-answer2">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="answer2{{ form.secondSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solidColor' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %} {% if  global.custom_gtm_conversions.apply_custom_conversion == 'true' %}gtm-proceed-two{% endif %}">{{global.proceedBtn}}</div>
                {% endif %}
            </div>

            <div class="box three {% if form.thirdSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.thirdSection.thirdSection2QuestionSection.splitQuestion and form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                <div class="pages">3 of {% if form.sectionsLength_options.selected == 'six_sections' %} 6 {% else %} 3 {% endif %}</div>
                
                {% if form.thirdSection.thirdSectionVsl.showVideo == 'true' and form.thirdSection.thirdSectionVsl.brightcoveVideoStorage != '' %}
                    {% from "../_vsl/_vsl.html" import vsl %}
                    {{ vsl(
                        brightcoveVideoStorage = form.thirdSection.thirdSectionVsl.brightcoveVideoStorage,
                        brightcoveAccountID = "6415681346001",
                        brightcoveVideoID = form.thirdSection.thirdSectionVsl.brightcoveVideoID,
                        customPlay = form.thirdSection.thirdSectionVsl.customPlay,
                        ID = 'formVsl',
                        path = global.path,
                        placeholder = form.thirdSection.thirdSectionVsl.placeholder,
                        placeholder_desktop = form.thirdSection.thirdSectionVsl.placeholder_desktop,
                        alt = form.thirdSection.thirdSectionVsl.alt,
                        hasControls = form.thirdSection.thirdSectionVsl.hasControls,
                        hidePlay = form.thirdSection.thirdSectionVsl.hidePlay,
                        isMutedAndAutoplay = form.thirdSection.thirdSectionVsl.isMutedAndAutoplay, 
                        customProgressBar = form.thirdSection.thirdSectionVsl.customProgressBar )
                    }}
                {% endif %}

                <h2 data-title="{{ form.thirdSection.title }} {{ form.thirdSection.productName }}" class="question">
                    {{ form.thirdSection.title }} <span>{{ form.thirdSection.productName }}</span>
                </h2>

                {% if form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' and form.thirdSection.thirdSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.thirdSection.thirdSection2QuestionSection.firstTitle}}</h3>
                {% endif %}

                <ul class="answers answer1" {% if form.thirdSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.thirdSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.thirdSection.thirdSectionItems %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.thirdSection.thirdSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.thirdSection.thirdSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.thirdSection.thirdSectionColumnsAmount.mobile}};"{% endif %}{% endfor %}>
                    {% for items in form.thirdSection.thirdSectionItems %}
                        <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-three{% endif %}">
                            <input {% if form.thirdSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.thirdSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="{% if form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.thirdSection.subject }}"
                                id="{% if form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.thirdSection.thirdSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.thirdSection.subject | lower }}">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="{% if form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                    {% endfor %}
                </ul>
                {% if global.disclaimer and global.disclaimer != '' %}
                    <p class="disclaimer">{{global.disclaimer}}</p>
                {% endif %}

                {% if form.thirdSection.thirdSection2QuestionSection.splitQuestion == 'true' %}
                    {% if form.thirdSection.thirdSection2QuestionSection.secondTitle != '' %}
                    <h3 class="subtitle">{{form.thirdSection.thirdSection2QuestionSection.secondTitle}}</h3>
                    {% endif %}

                    <ul class="answers answer2" {% if form.thirdSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.thirdSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.thirdSection.thirdSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.thirdSection.thirdSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.thirdSection.thirdSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.thirdSection.thirdSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.thirdSection.thirdSectionItemsSecond %}
                        <li class="answers__item">
                            <input {% if form.thirdSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.thirdSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="answer2{{ form.thirdSection.subject }}"
                                id="answer2{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.thirdSection.thirdSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.thirdSection.subject | lower }}-answer2">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="answer2{{ form.thirdSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solidColor' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %} {% if  global.custom_gtm_conversions.apply_custom_conversion == 'true' %}gtm-proceed-three{% endif %}">{{global.proceedBtn}}</div>
                {% endif %}

                {% if form.sectionsLength_options.selected == 'three_sections' %}
                    {% if form.sticky_cta_and_skip == 'false' %}
                        {% from "../_CTABtn/_CTABtn.html" import CTA %}
                        {{ CTA (
                            wrapCTA = false,
                            ctaID = "nextStep",
                            ctaHref = global.mainBtn_href,
                            ctaTarget = "_self",
                            dataParam = 'true',
                            ctaParam = 'false',
                            ctaText = global.mainBtn,
                            ctaClass = 'nextStep',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = form.cta.ctaBg_options.selected,
                            showQueueModal = form.queue.showQueueModal,
                            showReportScreen = form.reportScreen.show
                        )
                        }}
                    {% endif %}
                {% endif %}
            </div>
            {% if form.sectionsLength_options.selected == 'six_sections' %}
                <div class="box four {% if form.fourthSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.fourthSection.fourthSection2QuestionSection.splitQuestion and form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                    <div class="pages">4 of 6</div>

                    {% if form.fourthSection.fourthSectionVsl.showVideo == 'true' and form.fourthSection.fourthSectionVsl.brightcoveVideoStorage != '' %}
                    {% from "../_vsl/_vsl.html" import vsl %}
                    {{ vsl(
                        brightcoveVideoStorage = form.fourthSection.fourthSectionVsl.brightcoveVideoStorage,
                        brightcoveAccountID = "6415681346001",
                        brightcoveVideoID = form.fourthSection.fourthSectionVsl.brightcoveVideoID,
                        customPlay = form.fourthSection.fourthSectionVsl.customPlay,
                        ID = 'formVsl',
                        path = global.path,
                        placeholder = form.fourthSection.fourthSectionVsl.placeholder,
                        placeholder_desktop = form.fourthSection.fourthSectionVsl.placeholder_desktop,
                        alt = form.fourthSection.fourthSectionVsl.alt,
                        hasControls = form.fourthSection.fourthSectionVsl.hasControls,
                        hidePlay = form.fourthSection.fourthSectionVsl.hidePlay,
                        isMutedAndAutoplay = form.fourthSection.fourthSectionVsl.isMutedAndAutoplay, 
                        customProgressBar = form.fourthSection.fourthSectionVsl.customProgressBar )
                    }}
                {% endif %}
                    
                    <h2 data-title="{{ form.fourthSection.subject }}" class="question">{{ form.fourthSection.title }}</h2>

                    {% if form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' and form.fourthSection.fourthSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.fourthSection.fourthSection2QuestionSection.firstTitle}}</h3>
                    {% endif %}

                    <ul class="answers answer1" {% if form.fourthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.fourthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.fourthSection.fourthSectionItems %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.fourthSection.fourthSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.fourthSection.fourthSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.fourthSection.fourthSectionColumnsAmount.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.fourthSection.fourthSectionItems %}
                        <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-four{% endif %}">
                            <input {% if form.fourthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.fourthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="{% if form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fourthSection.subject }}"
                                id="{% if form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fourthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.fourthSection.fourthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.fourthSection.subject | lower }}">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="{% if form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fourthSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    {% if form.fourthSection.fourthSection2QuestionSection.splitQuestion == 'true' %}
                        {% if form.fourthSection.fourthSection2QuestionSection.secondTitle != '' %}
                        <h3 class="subtitle">{{form.fourthSection.fourthSection2QuestionSection.secondTitle}}</h3>
                        {% endif %}

                        <ul class="answers answer2" {% if form.fourthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.fourthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.fourthSection.fourthSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.fourthSection.fourthSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.fourthSection.fourthSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.fourthSection.fourthSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                            {% for items in form.fourthSection.fourthSectionItemsSecond %}
                            <li class="answers__item">
                                <input {% if form.fourthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.fourthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                    name="answer2{{ form.fourthSection.subject }}"
                                    id="answer2{{ form.fourthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.fourthSection.fourthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                                {% if items.icon and items.icon != '' %}
                                <svg class="icon icon--{{ form.fourthSection.subject | lower }}-answer2">
                                    <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                                </svg>
                                {% endif %}
                                <label for="answer2{{ form.fourthSection.subject | replace(' ', '') }}{{loop.index}}"
                                    class="question-type-radio">{{ items.value }}</label>
                                <span class="label">{{ items.value }}</span>
                            </li>
                            {% endfor %}
                        </ul>

                        <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solidColor' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %} {% if  global.custom_gtm_conversions.apply_custom_conversion == 'true' %}gtm-proceed-four{% endif %}">{{global.proceedBtn}}</div>
                    {% endif %}
                </div>

                <div class="box five {% if form.fifthSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.fifthSection.fifthSection2QuestionSection.splitQuestion and form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                    <div class="pages">5 of 6</div>

                    {% if form.fifthSection.fifthSectionVsl.showVideo == 'true' and form.fifthSection.fifthSectionVsl.brightcoveVideoStorage != '' %}
                    {% from "../_vsl/_vsl.html" import vsl %}
                    {{ vsl(
                        brightcoveVideoStorage = form.fifthSection.fifthSectionVsl.brightcoveVideoStorage,
                        brightcoveAccountID = "6415681346001",
                        brightcoveVideoID = form.fifthSection.fifthSectionVsl.brightcoveVideoID,
                        customPlay = form.fifthSection.fifthSectionVsl.customPlay,
                        ID = 'formVsl',
                        path = global.path,
                        placeholder = form.fifthSection.fifthSectionVsl.placeholder,
                        placeholder_desktop = form.fifthSection.fifthSectionVsl.placeholder_desktop,
                        alt = form.fifthSection.fifthSectionVsl.alt,
                        hasControls = form.fifthSection.fifthSectionVsl.hasControls,
                        hidePlay = form.fifthSection.fifthSectionVsl.hidePlay,
                        isMutedAndAutoplay = form.fifthSection.fifthSectionVsl.isMutedAndAutoplay, 
                        customProgressBar = form.fifthSection.fifthSectionVsl.customProgressBar )
                    }}
                {% endif %}

                    <h2 data-title="{{ form.fifthSection.subject }}" class="question">{{ form.fifthSection.title }}</h2>

                    {% if form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' and form.fifthSection.fifthSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.fifthSection.fifthSection2QuestionSection.firstTitle}}</h3>
                    {% endif %}
    
                    <ul class="answers answer1" {% if form.fifthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.fifthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.fifthSection.fifthSectionItems %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.fifthSection.fourthSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.fifthSection.fourthSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.fifthSection.fourthSectionColumnsAmount.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.fifthSection.fifthSectionItems %}
                        <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-five{% endif %}">
                            <input {% if form.fifthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.fifthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="{% if form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fifthSection.subject }}"
                                id="{% if form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fifthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.fifthSection.fifthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.fifthSection.subject | lower }}">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="{% if form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.fifthSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    {% if form.fifthSection.fifthSection2QuestionSection.splitQuestion == 'true' %}
                        {% if form.fifthSection.fifthSection2QuestionSection.secondTitle != '' %}
                        <h3 class="subtitle">{{form.fifthSection.fifthSection2QuestionSection.secondTitle}}</h3>
                        {% endif %}

                        <ul class="answers answer2" {% if form.fifthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.fifthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.fifthSection.fifthSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.fifthSection.fifthSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.fifthSection.fifthSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.fifthSection.fifthSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                            {% for items in form.fifthSection.fifthSectionItemsSecond %}
                            <li class="answers__item">
                                <input {% if form.fifthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.fifthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                    name="answer2{{ form.fifthSection.subject }}"
                                    id="answer2{{ form.fifthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.fifthSection.fifthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                                {% if items.icon and items.icon != '' %}
                                <svg class="icon icon--{{ form.fifthSection.subject | lower }}-answer2">
                                    <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                                </svg>
                                {% endif %}
                                <label for="answer2{{ form.fifthSection.subject | replace(' ', '') }}{{loop.index}}"
                                    class="question-type-radio">{{ items.value }}</label>
                                <span class="label">{{ items.value }}</span>
                            </li>
                            {% endfor %}
                        </ul>

                        <div id="proceedStep" class="btn hidden nextStep {% if form.cta.ctaBg_options.selected == 'solidColor' %}nextStep--solid{% elif form.cta.ctaBg_options.selected == 'gradient' %}nextStep--gradient{% endif %} {% if  global.custom_gtm_conversions.apply_custom_conversion == 'true' %}gtm-proceed-five{% endif %}">{{global.proceedBtn}}</div>
                    {% endif %}
                </div>

                <div class="box six {% if form.sixthSection.allowMultiSelection == 'true' %} box--multiple-answer {% endif %}" {% if form.sixthSection.sixthSection2QuestionSection.splitQuestion and form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' %}data-split='true'{% endif %}>
                    <div class="pages">6 of 6</div>

                    {% if form.sixthSection.sixthSectionVsl.showVideo == 'true' and form.sixthSection.sixthSectionVsl.brightcoveVideoStorage != '' %}
                        {% from "../_vsl/_vsl.html" import vsl %}
                        {{ vsl(
                            brightcoveVideoStorage = form.sixthSection.sixthSectionVsl.brightcoveVideoStorage,
                            brightcoveAccountID = "6415681346001",
                            brightcoveVideoID = form.sixthSection.sixthSectionVsl.brightcoveVideoID,
                            customPlay = form.sixthSection.sixthSectionVsl.customPlay,
                            ID = 'formVsl',
                            path = global.path,
                            placeholder = form.sixthSection.sixthSectionVsl.placeholder,
                            placeholder_desktop = form.sixthSection.sixthSectionVsl.placeholder_desktop,
                            alt = form.sixthSection.sixthSectionVsl.alt,
                            hasControls = form.sixthSection.sixthSectionVsl.hasControls,
                            hidePlay = form.sixthSection.sixthSectionVsl.hidePlay,
                            isMutedAndAutoplay = form.sixthSection.sixthSectionVsl.isMutedAndAutoplay, 
                            customProgressBar = form.sixthSection.sixthSectionVsl.customProgressBar )
                        }}
                    {% endif %}

                    <h2 data-title="{{ form.sixthSection.subject }}" class="question">{{ form.sixthSection.title }}</h2>

                    {% if form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' and form.sixthSection.sixthSection2QuestionSection.firstTitle != '' %}
                    <h3 class="subtitle">{{form.sixthSection.sixthSection2QuestionSection.firstTitle}}</h3>
                    {% endif %}
    
                    <ul class="answers answer1" {% if form.sixthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.sixthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.sixthSection.sixthSectionItems %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.sixthSection.sixthSectionColumnsAmount.enable == 'true' %}style="--answersAmount:{{form.sixthSection.sixthSectionColumnsAmount.desktop}}; --answersAmountMobile: {{form.sixthSection.sixthSectionColumnsAmount.mobile}};"{% endif %}{% endfor %}>
                        {% for items in form.sixthSection.sixthSectionItems %}
                        <li class="answers__item {% if global.custom_gtm_conversions.apply_custom_conversion == 'true' and form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'false' %}gtm-answers-six {% if global.custom_gtm_conversions.detect_last_question_answer == 'true' %}gtm-answers-six-{{ form.sixthSection.subject | replace(' ', '') }}{{loop.index}}{% endif %}{% endif %}">
                            <input {% if form.sixthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.sixthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                name="{% if form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.sixthSection.subject }}"
                                id="{% if form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.sixthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.sixthSection.sixthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                            {% if items.icon and items.icon != '' %}
                            <svg class="icon icon--{{ form.sixthSection.subject | lower }}">
                                <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                            </svg>
                            {% endif %}
                            <label for="{% if form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' %}answer1{% endif %}{{ form.sixthSection.subject | replace(' ', '') }}{{loop.index}}"
                                class="question-type-radio">{{ items.value }}</label>
                            <span class="label">{{ items.value }}</span>
                        </li>
                        {% endfor %}
                    </ul>

                    {% if form.sixthSection.sixthSection2QuestionSection.splitQuestion == 'true' %}
                        {% if form.sixthSection.sixthSection2QuestionSection.secondTitle != '' %}
                        <h3 class="subtitle">{{form.sixthSection.sixthSection2QuestionSection.secondTitle}}</h3>
                        {% endif %}

                        <ul class="answers answer2" {% if form.sixthSection.allowMultiSelection == 'true' %} data-answer = "checkbox" {% elif form.sixthSection.allowMultiSelection == 'false' %} data-answer = "radio" {% endif %} {% for items in form.sixthSection.sixthSectionItemsSecond %}{% if global.survey_version_options.selected == 'redesignWithProgressBar' and form.sixthSection.sixthSectionColumnsAmountSecond.enable == 'true' %}style="--answersAmount:{{form.sixthSection.sixthSectionColumnsAmountSecond.desktop}}; --answersAmountMobile: {{form.sixthSection.sixthSectionColumnsAmountSecond.mobile}};"{% endif %}{% endfor %}>
                            {% for items in form.sixthSection.sixthSectionItemsSecond %}
                            <li class="answers__item">
                                <input {% if form.sixthSection.allowMultiSelection == 'true' %} type="checkbox" {% elif form.sixthSection.allowMultiSelection == 'false' %} type="radio" {% endif %} value="{{ items.value }}"
                                    name="answer2{{ form.sixthSection.subject }}"
                                    id="answer2{{ form.sixthSection.subject | replace(' ', '') }}{{loop.index}}" {% if form.sixthSection.sixthSectionPersonalizedContent.allowPersonalizedContent == 'true' %} data-param-fw='true' {% endif %}>
                                {% if items.icon and items.icon != '' %}
                                <svg class="icon icon--{{ form.sixthSection.subject | lower }}">
                                    <use xlink:href="svg/sprite.svg?rel={{timestamp}}#{{ items.icon | upper }}" />
                                </svg>
                                {% endif %}
                                <label for="answer2{{ form.sixthSection.subject | replace(' ', '') }}{{loop.index}}"
                                    class="question-type-radio">{{ items.value }}</label>
                                <span class="label">{{ items.value }}</span>
                            </li>
                            {% endfor %}
                        </ul>
                    {% endif %}

                    {% if form.sticky_cta_and_skip == 'false' %}
                        {% from "../_CTABtn/_CTABtn.html" import CTA %}
                        {{ CTA (
                            wrapCTA = false,
                            ctaID = "nextStep",
                            ctaHref = global.mainBtn_href,
                            ctaTarget = "_self",
                            dataParam = 'true',
                            ctaParam = 'false',
                            ctaText = global.mainBtn,
                            ctaClass = 'nextStep',
                            hasIcon = 'false',
                            hideCta = 'false',
                            bgColor = form.cta.ctaBg_options.selected,
                            showQueueModal = form.queue.showQueueModal,
                            showReportScreen = form.reportScreen.show,
                            fire_GTM_Trigger = 'true'
                        )
                        }}
                    {% endif %}
                </div>
            {% endif %}
        </form>
    </div>

  {% if form.sticky_cta_and_skip == 'false' %}
    {% from "../_CTABtn/_CTABtn.html" import CTA %}
        {{ CTA (
            wrapCTA = false,
            ctaID = "skipQuestion",
            ctaHref = global.mainBtn_href,
            ctaTarget = "_self",
            dataParam = 'true',
            ctaParam = 'false',
            ctaText = form.skip,
            ctaClass = 'skip gtm-skip-one',
            hasIcon = 'false',
            hideCta = 'false',
            bgColor = '',
            showQueueModal = 'form.queue.showQueueModal',
            showReportScreen = 'form.reportScreen.show'
        )
        }}
    {% endif %}
</section>

{% if form.queue.showQueueModal === 'true' %}  
  <div class="modal fade" id="queueModal" tabindex="-1" role="dialog" aria-labelledby="queueModalLabel" aria-hidden='true'>
    <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="queueModalLabel">{{form.queue.title}}</h5>
        </div>
        <div class="modal-body">
          <p>{{form.queue.content}}</p>
        </div>
      </div>
    </div>
  </div>
{% endif %}

{% if form.reportScreen.show === 'true' %}  
    {% include '../_reportScreen/_reportScreen.html' %}

    <div class="modal fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="reportModalLabel" aria-hidden='true'>
        <div class="modal-dialog modal-dialog-centered modal-l" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <svg class="icon icon--logo">
                    <use xlink:href="svg/sprite.svg?rel={{timestamp}}#GUNDRY_LOGO" />
                </svg>
                <h3 class="modal-title" id="reportModalLabel">{{form.reportScreen.progressModalContent.title}}</h3>
            </div>
            <div class="modal-body">
                {% from "../_progressBar/_progressBar.html" import progressBar %}
                {{ progressBar (
                    id='progress',
                    showPercentage='true'
                )
                }}
            </div>
            </div>
        </div>
    </div>

    <script>
        const progressBarTimeToFill = {{form.reportScreen.progressModalContent.progressBarTimeToFill}}
        const progressBarPopUpCloseTime = {{form.reportScreen.progressModalContent.progressBarPopUpCloseTime}}
    </script>
{% endif %}

{% if form.sectionsLength_options.selected == 'six_sections' or form.skipToNextQuestion == 'true' or global.survey_version_options.selected == 'redesignWithProgressBar' %}
    <script>
        {% if form.sectionsLength_options.selected == 'six_sections' %}
            const sixQuestions = true
        {% endif %}

        {% if form.skipToNextQuestion == 'true' %}
            const skipToNextQuestion = true
        {% endif %}

        {% if global.survey_version_options.selected == 'redesignWithProgressBar' %}
            const redesignWithProgressBar = true
        {% endif %}
    </script>
{% endif %}