{% assign featureCount = 0 %}
{%- for feature in page.features_main -%}

	{% assign featureCount = featureCount | plus: 1 %}

	{% assign columnCount = 0 %}
	{% assign globalColumnData = "" %}

	{% if feature.t_template %}
	{% assign template_name = feature.t_template | append: '.html'%}
	{% include sections/{{template_name}}  %}
	{% else %}

	{% assign section_class = feature.p_section_class %}
	{% assign section_bg_image_path = '' %}
	{% assign container_class = 'container' %}

	{% if feature.p_full_width_container %}
	{% assign container_class = 'container-fluid' %}
	{% endif %}

	{% if feature.i_bg_image %}
	{% capture image_loc %}{% picture direct-url_1064 pages/{{feature.i_bg_image }} %}{% endcapture %} 
    {% assign section_bg_image_path =  image_loc %}
	{% assign section_class = section_class | append: ' bg-cover bg-size-cover' %}
	{% endif %}

	{% if feature.p_parallax %}
	{% assign section_class = section_class | append: ' parallax text-white'%}
	{% endif %}

	{% assign bg_video_src = 'mp4:' | append: feature.p_video_link_mp4 %}
	{% assign bg_video_src = bg_video_src | append: ',webm:' | append: feature.p_video_link_webm %}
	{% assign bg_video_src = bg_video_src | append: ',ogv:' | append: feature.p_video_link_ogv %}
	
	<!-- Imageblock Section -->
	<section id="{{feature.p_section_id}}" class="hub-section border-radius-20 imageblock-section {{section_class}}" data-speed="1.4" data-video-src="{{bg_video_src}}"  {% if feature.i_bg_image %}style="background-image: url({{section_bg_image_path}}){% endif %}">
		{% if feature.p_parallax %}<div class="mask bg-dark opacity-4"></div>{% endif %}
		<div class="{{container_class}}">
			{% if feature.t_headline or feature.t_subheadline %}
				<div class="row justify-content-center text-center {% if feature.columns %}mb-5{% endif %}">
					<div class="col-12 col-md-10 col-lg-9 ">
						{% if feature.t_headline %}
						<h2 class="display-4">
							{{ feature.t_headline }}
						</h2>
						{% endif %}

						{% if feature.t_subheadline %}
						<p class="h2 line-height-lg font-weight-normal mt-2">
							{{ feature.t_subheadline }}
						</p>
						{% endif %}
						{% if feature.t_button_label %}
							<div class="mt-4">
								<a href="{{site.url}}/{{feature.p_button_url}}" class="btn btn-lg btn-link">
									{{feature.t_button_label}}
								</a>
							</div>
						{% endif %}

						{% if feature.i_image != null and feature.p_video_link_mp4 == null %}
						
							{% assign image_alt =  feature.i_image | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
							{% picture hero_img_slide pages/{{ feature.i_image }} alt="{{ image_alt }}" class="img-fluid mx-auto" %}
					
						{% endif %}
					</div>
				</div>
			{% endif %}

			{% if feature.columns %}

				{% assign i_col_num = 12 | divided_by: feature.p_columns %}
				{% assign row_class = '' %}

				{% if feature.p_columns_spacing == false %}
					{% assign row_class = 'no-gutters ' %}
				{% endif %}

				{% if feature.i_stretch_class %}
					{% assign row_class = row_class | append: 'align-items-md-stretch' %}
				{% endif %}
				
				<div class="row justify-content-start {{row_class}}">
					{%- for column in feature.columns -%}
					
						{% assign columnCount = columnCount | plus: 1 %}
						{% assign addeColumnCount = columnCount | plus: 1 %}

						{% if column.t_template %}
							{% assign sub_template = column.t_template | append: '.html'%}
							{% include sections/{{sub_template}}  %}
						{% else %}
							{% assign i_bg_img_path = '' %}
							{% assign bg_over = '' %}
							{% assign box_class = column.i_box_class %}

							{% if column.i_bg_image %}
								{% capture i_bg_img_path %}{% picture direct-url pages/{{column.i_bg_image }} %}{% endcapture %} 
								{% assign i_bg_img_path =  i_bg_img_path %}
								{% assign box_class = box_class | append: ' bg-cover bg-size-cover' %}
							{% endif %}

							{% if column.i_image %}
								{% assign box_class = box_class | append: ' text-center' %}
							{% endif %}

							{% if column.p_parallax %}
								{% assign box_class = box_class | append: ' parallax text-white'%}
							{% endif %}

							{% if column.i_bg_overlay %}
								{% assign box_class = box_class | append: ' text-white' %}
								{% capture bg_over %}{% picture direct-url pages/{{column.i_bg_overlay }} %}{% endcapture %} 
								{% assign bg_over =  bg_over %}
							{% endif %}

							<div class="col-md-{{i_col_num}} {{column.i_col_class}} mb-3 mb-md-0">
								<div class="position-relative border-radius-20 d-flex flex-wrap flex-row align-items-center-1 h-100 overflow-hidden {{box_class}}" {% if column.i_bg_image %} style="background-image: url('{{i_bg_img_path}}');" {% endif %}>
									{% if column.p_parallax %}<div class="mask bg-cover bg-size-cover {% if column.i_bg_image %}bg-dark opacity-4{% endif %}" {% if column.i_bg_overlay %} style="background-image: url('{{ bg_over }}');" {% endif %}></div>{% endif %}
									<div class="{% if feature.p_full_width_container %}box-max-width {% if column.features %} mx-4 {% else %}mx-auto z-index-2{% endif %}{% endif %} {% if column.p_parallax %}flex-column{% endif %} d-flex flex-column">
										{% if column.t_headline %}
											<h3 class="h1 font-weight-normal my-3" data-aos="fade-up">
												{{column.t_headline}}
											</h3>
										{% endif %}
										{% if column.t_subheadline %}
											<h4 class="line-height-lg font-weight-light my-2" data-aos="fade-up">
												{{column.t_subheadline}}
											</h4>
										{% endif %}

										{% if column.t_description %}
											<p class="h6 line-height-lg font-weight-normal text-justify mt-2" data-aos="fade-up">
												{{ column.t_description }}
											</p>
										{% endif %}
										{% if column.buttons %}
											<div class="{{ column.t_button_class }}" style="display: none;">
											{%- for button in column.buttons -%}
												<a href="{{button.p_button_url}}" class="{{button.t_button_class}}" data-aos="fade-up">
													{{button.t_button_label}}
												</a>
											{%- endfor -%}
											</div>
										{% endif %}

										{% if column.features %}
											<div class="row justify-content-start align-items-md-stretch mt-4">
											{%- for f in column.features -%}
												<div class="col-md-4 text-center">
													{% if f.t_icon %}
														{% assign title = f.t_icon | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
														{% picture small_icons pages/{{ f.t_icon }} alt="{{ title }}" %}
													{% endif %}
													{{ f.t_name }}
												</div>
											{%- endfor -%}
											</div>
										{% endif %}

										{% if column.t_button_label %}
											<div class="my-4 shuklaji">
												<a href="{{column.p_button_url}}" class="btn btn-lg btn-link"  data-aos="fade-up">
													{{column.t_button_label}}
												</a>
											</div>
										{% endif %}

										{%- for content in column.content -%}
											{% if content.t_text %}
												{% if content.t_subheadline %}
													<h4 class="font-weight-normal" data-aos="fade-up">{{content.t_subheadline}}</h4>
												{% endif %}
												<p>{{content.t_text}}</p>
											{% endif %}
										{%- endfor -%}
                                        {% if column.hasExpandedDiv %}
											{% assign seo_image_path = "" %}
											{% if column.i_image != null %}
											{% capture seo_image_path %}{% picture features_777 pages/{{ column.i_image }} %}{% endcapture %} 
											{% elsif column.i_image2 != null %}
											{% capture seo_image_path %}{% picture features_777 pages/{{ column.i_image2 }} %}{% endcapture %} 
											{% endif %}
											<div data-modal data-toggle="modal" data-target="seoExpansion_{{ forloop.index }}" data-subtitle="{{ column.t_expandedDivSubHeader }}" data-title = "{{ column.expandedDivHeader }}" data-body = "{{ column.t_expandedDivDescription }}" data-image = '{{ seo_image_path }}' class="expandSeo btn-lg" id="seoExpansion_{{ forloop.index }}">{{ page.t_learn_button }}</div>
											<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="quickViewModalTitle" aria-hidden="true" id="seoExpansion_{{ forloop.index }}">
												<div class="modal-dialog modal-seo">
												  <div class="modal-content">
													<div class="modal-header seo-expansion-header">
													  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
														<svg class="icon-close" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 18 18">
														  <path d="M15 4l-5 5 5 5v1h-1l-5-5-5 5H3v-1l5-5-5-5V3h1l5 5 5-5h1v1z"></path>
														</svg>
													  </button>
													</div>
													<div class="modal-body">
													</div>
												  </div>
												</div>
											  </div>
										{% endif %}
										{% if column.i_image != null and column.p_video_link_mp4 == null %}
										<div class="mt-auto">
											{% assign image_alt =  column.i_image | remove: '.png' | replace: '-',' ' | replace: '_',' ' %}
											{% picture features_777 pages/{{ column.i_image }} alt="{{ image_alt }}" class="img-fluid {{ column.i_img_class }} max-h-420rem" %}
										</div>
										{% endif %}

										{% if column.p_video_link_mp4 %}
											{% assign bg_image_path = site.baseurl | append: '/assets/background/' | append: column.i_image %}
											{% assign video_link_mp4 = site.baseurl | append: '/assets/videos/' | append: column.p_video_link_mp4 %}
											{% assign video_link_ogv = site.baseurl | append: '/assets/videos/' | append: column.p_video_link_ogv %}
											{% assign video_link_webm = site.baseurl | append: '/assets/videos/' | append: column.p_video_link_webm %}
											<div class="device_frame device_frame_{{column.i_frame}}" style="background-image: url({{ bg_image_path }});">
												<video id="home-video-{{column.i_frame}}" preload="auto" loop>
													<source src="{{ video_link_mp4 }}" type="video/mp4">
													<source src="{{ video_link_ogv }}" type="video/ogv">
													<source src="{{ video_link_webm }}" type="video/webm">
												</video>
											</div>
										{% endif %}
									</div>
								</div>
							</div>
						{% endif %}
					{%- endfor -%}
				</div>				
			{% endif %}
		</div>
	</section>
	<!-- End Imageblock Section -->
	{% endif %}
{%- endfor -%}

{%- for item in page.features_main -%}
{% if item.t_template contains "template-success-story-new" %}
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "VideoObject",
  "name": "{{ item.t_headline }} {{ item.t_subheadline }}",
  "description": "{{ item.t_description }}",
  "thumbnailUrl": [
    "{{ site.url }}/assets/images{{ item.i_bg_image }}"{%- if item.i_bg_image_1x1 -%},
    "{{ site.url }}/assets/images{{ item.i_bg_image_1x1 }}",
    "{{ site.url }}/assets/images{{ item.i_bg_image_4x3 }}",
    "{{ site.url }}/assets/images{{ item.i_bg_image_16x9 }}"  {% endif %}
   ],
  "uploadDate": "{{ item.v_upload_date }}",
  {%- for video in item.buttons -%}
  {% if video.t_button_label contains "Watch Video" %}
  "contentUrl": "{{ video.p_button_url }}",
  {% endif %}
  {%- endfor -%}
  "duration": "PT{{ item.v_length_minutes }}M{{ item.v_length_seconds }}S"
}
</script>
{% endif %}
{%- endfor -%}