<div id="flo_slider_in_content_id_{{ slider_id }}" data-type="{{slider_details.type}}" class="flo_slider_in_content auto_color_{{ slideshow.auto_color }} {{ classes }} {{ slideshow.css_classes }} background_{{ slideshow.background_size }}">

	{% if can_edit %}

		<div class="edit-slide"><a href="{{ edit_link|raw }}">{{ 'Edit this slider'|translate }}</a> </div>

	{% endif %}

	<div class="slide_count">

		<h4 class="index"></h4>
    <h4 class="slash">/</h4>
		<h4 class="count"></h4>

	</div>

	<div class="slide_selector">
		{% for slide in slides %}
			<div class="selector">
				<div class="selector_content_wrap">
					<h5 class="index">{{ loop.index }}</h5>
					<h5 class="label">{{ slide.title | split(' ')[0] }}</h5>
				</div>
			</div>
		{% endfor %}
	</div>

	<div class="slick"  data-autoplay="{{ slideshow.autoplay }}" data-autoplay-speed="{{ slideshow.autoplay_speed }}">
		{% set counter = 1 %}
		{% for current in slides %}

			<div
			{% if counter < 4 %}  style="background-image: url('{{ current.slide }}')" {% endif %}
					lazy-bgi='{{ current.slide }}' 
					{% if current.floembed %}
						data-video-url="{{ current.floembed }}"
					{% endif %}
					class="slide {{ current.css_classes }}
						{% if current.floembed %}
							video
						{% endif %}
						{% if current.sizes.full.orientation == "portrait" %}
							has_portrait_img
						{% endif %}
					"
					>
					<img alt=""
						{% if counter < 4 %}src="{{current.slide}}"{% endif %}
						data-slick-lazy-src="{{ current.slide }}"
						data-small = "{{ current.slide }}"
						width = "{{ current.sizes.full.width }}"
						height = "{{ current.sizes.full.height }}"
						class="no-lazyload"
					/>
					
					{% if current.floembed %}
						<div class="button_video_close flo-icon-cancel" style="color: {{ current.title_color ? current.title_color : slideshow.title_color }}">
						</div>
					{% endif %}

					<div class="slide_content">
					
						{% if current.floembed %}
						  <div class="button_video_play flo-icon-flo-play" style="color: {{ current.title_color ? current.title_color : slideshow.title_color }}">
						  </div>
						{% endif %}
						<div class="title_wrap">

							<div class="title">

								<{{ current.title_heading ? current.title_heading : slideshow.title_heading }} style="color: {{ current.title_color ? current.title_color : slideshow.title_color }}">{{ current.title }}</{{ current.title_heading ? current.title_heading : slideshow.title_heading }}>

							</div>

							<div class="subtitle" style="color: {{ current.subtitle_color ? current.subtitle_color : slideshow.subtitle_color }}">

								<{{ current.subtitle_heading ? current.subtitle_heading : slideshow.subtitle_heading }}>{{ current.subtitle }}</{{ current.subtitle_heading ? current.subtitle_heading : slideshow.subtitle_heading }}>

							</div>

							{% if current.url %}
							<div class="custom-url">

								<a href="{{ current.url }}"  style="color: {{ current.subtitle_color ? current.subtitle_color : slideshow.subtitle_color }}">  {{ current.label ? current.label : 'Full Story' }}  </a>

							</div>
							{% endif %}


						</div>

					</div>

			</div>
			{% set counter = counter + 1 %}
		{% endfor %}

	</div>

	<div class="loading_view">
		<div class="spinner flo-icon-flothemes"></div>
	</div>

	<style type="text/css">

		@media (min-width: 768px){

			#flo_slider_in_content_id_{{ slider_id }} .slide{
				height: {{ slideshow.desktop_height }};
			}

			/* CONTROLS COLORS START */

				/* Most of elements start */
					{%
						set elements = [
							".slick-prev",
							".slick-next",
							".slick-dots",
							".slide_count",
							".selector_content_wrap",
							".sic-slick-prev",
							".sic-slick-next"
						]
					%}

					{% for element in elements %}
						#flo_slider_in_content_id_{{ slider_id }} {{element}} {
							color: {{ slideshow.controls_color }};
						}
						#flo_slider_in_content_id_{{ slider_id }} {{element}}:before {
							color: {{ slideshow.controls_color }};
						}
						#flo_slider_in_content_id_{{ slider_id }} {{element}}:after {
							background-color: {{ slideshow.controls_color }};
						}

						/* Hover */
						#flo_slider_in_content_id_{{ slider_id }} {{element}}:hover {
							color: {{ slideshow.controls_secondary_color }};
						}
						#flo_slider_in_content_id_{{ slider_id }} {{element}}:hover:before {
							color: {{ slideshow.controls_secondary_color }};
						}
						#flo_slider_in_content_id_{{ slider_id }} {{element}}:hover:after {
							background-color: {{ slideshow.controls_secondary_color }};
						}

					{% endfor %}
				/* End */

				/* Slide Selector Bottom Start */
					{% set selector = ".slide_selector_type_bottom .selector_content_wrap" %}

					/* Bottom Border */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_bottom .slide_selector:after {
						background-color: {{ slideshow.controls_color }};
					}
					/* Vertical Line*/
					#flo_slider_in_content_id_{{ slider_id }}{{selector}}:before {
						background-color: {{ slideshow.controls_color }};
					}
					/* Dot */
					#flo_slider_in_content_id_{{ slider_id }}{{selector}}:after {
						background-color: {{ slideshow.controls_color }};
					}
					/* Index */
					#flo_slider_in_content_id_{{ slider_id }}{{selector}} .index{
						color: {{ slideshow.controls_color }};
					}
					/* Label */
					#flo_slider_in_content_id_{{ slider_id }}{{selector}} .label{
						color: {{ slideshow.controls_color }};
					}

					/* Hover start */
						/* Vertical Line*/
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_bottom .slide_selector .selector:hover .selector_content_wrap:before {
							background-color: {{ slideshow.controls_secondary_color }};
						}
						/* Dot */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_bottom .slide_selector .selector:hover .selector_content_wrap:after {
							background-color: {{ slideshow.controls_secondary_color }};
						}
						/* Index */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_bottom .slide_selector .selector:hover .selector_content_wrap .index{
							color: {{ slideshow.controls_secondary_color }};
						}
						/* Label */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_bottom .slide_selector .selector:hover .selector_content_wrap .label{
							color: {{ slideshow.controls_secondary_color }};
						}
					/* Hover end*/

				/* Slide Selector Bottom End*/

				/* Slide Selector Bottom Right Start */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right_bottom .slide_selector .selector_content_wrap .label:before{
						background-color: {{ slideshow.controls_color }};
					}
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right_bottom .slide_selector .selector_content_wrap .label:after{
						background-color: {{ slideshow.controls_color }};
					}
				/* Slide Selector Bottom Right End */

				/* Slide Selector Left 2 Start */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_2 .slide_selector .selector_content_wrap:before {
						background-color: {{ slideshow.controls_secondary_color }};
					}
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_2 .slide_selector .selector_content_wrap .label:after{
						background-color: {{ slideshow.controls_color }};
					}
				/* Slide Selector Left 2 End */

				/* Slide Selector Left 3 Start */
					/* Big Circlce */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_3 .selector.slick-current .label {
						background-color: {{ slideshow.controls_secondary_color }};
					}
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_3 .selector:hover .label {
						background-color: {{ slideshow.controls_secondary_color }};
					}
				/* Slide Selector Left 3 End */

				/* Slide Selector left_4 Start */
					/* Index start */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_4 .index:before{
						color: {{ slideshow.controls_color }};
					}

					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_left_4 .slide_selector .selector_content_wrap .label:after{
						border-color: {{ slideshow.controls_color }};
					}
				/* Slide Selector left_4 End */

				/* Slide Selector Right Start */
					{% set selector = ".slide_selector_type_right .selector_content_wrap" %}
					/* Vertical Line */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .slide_selector:before {
						background-color: {{ slideshow.controls_color }};
					}
					/* Label */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .label {
						color: {{ slideshow.controls_color }};
					}
					/* Index */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .index {
						color: {{ slideshow.controls_color }};
					}
					/* Small Line */
					#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .label:after {
						background-color: {{ slideshow.controls_secondary_color }};
					}


					/* Hover start */
						/* Small Line */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .selector:hover .label:after {
							background-color: {{ slideshow.controls_secondary_color }};
						}
						/* Index */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .selector:hover .index {
							color: {{ slideshow.controls_secondary_color }};
						}
						/* Label */
						#flo_slider_in_content_id_{{ slider_id }}.slide_selector_type_right .selector:hover .label {
							color: {{ slideshow.controls_secondary_color }};
						}
					/* Hover end*/

				/* Slide Selector Right End*/

				/* Dots left bottom start */
				#flo_slider_in_content_id_{{ slider_id }}.dots_type_left_bottom .slick-dots li:before

				{
					background-color: {{ slideshow.controls_color }};
				}

				#flo_slider_in_content_id_{{ slider_id }}.dots_type_left_bottom .slick-dots li:hover:before,
				#flo_slider_in_content_id_{{ slider_id }}.dots_type_left_bottom .slick-dots li.slick-active:before {
					background-color: {{ slideshow.controls_secondary_color }};
				}
				/* Dots left bottom end */

				/* Count start */
				#flo_slider_in_content_id_{{ slider_id }}.dots_type_left_bottom .slick-dots li:before

				{
					background-color: {{ slideshow.controls_color }};
				}
				/* Count end *

			/* CONTROLS COLORS END */

		}

		@media (max-width: 767px){
			#flo_slider_in_content_id_{{ slider_id }} .slide{
				/*height: {{ slideshow.mobile_height }};*/
			}
		}

	</style>

</div>
