{%- 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 }}",
  "duration": "PT{{ item.v_length_minutes }}M{{ item.v_length_seconds }}S",
  {%- for video in item.buttons -%}
  {% if video.t_button_label contains "Watch Video" %}
  "contentUrl": "{{ video.p_button_url }}"
  {% endif %}
  {%- endfor -%}
}
</script>
{% endif %}
{%- endfor -%}

{% 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 %}
	{% assign section_bg_image_path = site.url | append: '/assets/background/' | append: feature.i_bg_image %}
	{% 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 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 store-apps/{{ 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 %}
								{% assign i_bg_img_path = site.url | append: '/assets/background/' | append: column.i_bg_image %}
								{% 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' %}
								{% assign bg_over = site.url | append: '/assets/background/' | append: column.i_bg_overlay %}
							{% endif %}

							<div class="col-md-{{i_col_num}} {{column.i_col_class}} mb-3 mb-md-0">
								<div class="position-relative  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 {% endif %}{% endif %} {% if column.p_parallax %}flex-column{% endif %} d-flex flex-column">
										{% if column.t_headline %}
											<h5 class="h1 font-weight-normal my-3" data-aos="fade-up">
												{{column.t_headline}}
											</h5>
										{% 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 icons/{{ 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.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_2 store-apps/{{ 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/video_products/' | append: column.p_video_link_mp4 %}
											{% assign video_link_ogv = site.baseurl | append: '/assets/video_products/' | append: column.p_video_link_ogv %}
											{% assign video_link_webm = site.baseurl | append: '/assets/video_products/' | 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 %}
										{% if column.hasExpandedDiv %}
											<button class="h2 rounded m-2 float-right position-absolute border-0 p-1 px-3 d-flex justify-content-center align-items-center {{ column.hasclassbg }}"  data-expandingDivID="feature{{ featureCount }}_column{{ columnCount }}"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000000'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg></button>			
										{% endif %}
									</div>
								</div>
							</div>
						{% endif %}
					{%- endfor -%}
				</div>
				
				{% assign columnCount = 0 %}
				{%- for column in feature.columns -%}
					{% assign columnCount = columnCount | plus: 1 %}
					{% if column.hasExpandedDiv %}
						<section class="{{ column.expandedDivClass }} col-12 overflow-hidden feature{{ featureCount }}" style="height: 0;overflow: hidden;" ID="feature{{ featureCount }}_column{{ columnCount }}">
							<div class="container-fluid">
								<div class="row justify-content-start ">
									<div class="col-md-12 order-1 order-md-1 mb-3 mb-md-0 text-dark">
										{% if column.t_expandedDivHeader %} <h5 class="h1 font-weight-normal my-3 aos-init aos-animate"> {{ column.t_expandedDivHeader }} </h5>{% endif %}
										{% if column.t_expandedDivDescription %} <p class="h6 line-height-lg font-weight-normal text-justify mt-2 aos-init aos-animate"> {{ column.t_expandedDivDescription }} </p>{% endif %}
									</div>
								</div>
							</div>
						</section>
					{% endif %}
				{%- endfor -%}
				
			{% endif %}
		</div>
	</section>
	<!-- End Imageblock Section -->
	{% endif %}
{%- endfor -%}