<div {{#if blockCustomID}}id="{{{blockCustomID}}}"{{else}}id="skt-builder-content-timeline-block-{{id}}"{{/if}} class="{{#if blockCustomClass}}{{{blockCustomClass}}} {{/if}}skt-builder-block-wrapper skt-builder-content-timeline-block skt-builder-content-timeline-block-{{id}}" style="background-color: {{blockBackgroundColor}}; background-image: url({{blockBgImageUrl}}); padding-bottom: {{blockPaddingBottom}}px; padding-top: {{blockPaddingTop}}px; {{#if blockParallaxEffect}}background-attachment: fixed;{{/if}}">
	<div class="skt-builder-block-inner skt-builder-block-inner-{{id}}" style="{{#if blockAnimation}}visibility: hidden;{{/if}}">
		<div class="skt-builder-container">
        	<style>
            	.skt-builder-content-timeline-block-{{id}} .skt-builder-block-column-button{background-color: {{blockButtonBgColor}}; color: {{blockButtonTextColor}};}
				.skt-builder-content-timeline-block-{{id}} .skt-builder-block-column-button:hover{background-color: {{blockButtonHoverBgColor}}; color: {{blockButtonHoverTextColor}};}
            </style>
			{{#if blockTitle}}
				<div class="skt-builder-block-title">
					<h2 style="color: {{blockTitleColor}}; text-align: {{blockTitleAlign}};">{{blockTitle}}</h2>
				</div>
			{{/if}}
			{{#if blockDescription}}
                <div class="skt-builder-block-description">{{{blockDescription}}}</div>
            {{/if}}
			<div class="skt-builder-timeline-container">
            	<div class="skt-builder-timeline-row">
                	<ul class="skt-builder-timeline-both-side">
                    	<div class="skt-builder-timeline-vertical" style="background-color: {{blockTimelineTrackColor}};"></div>
                    	{{#if blockColumns.length}}
                        	{{#each_with_sort blockColumns "order"}}
                            	<li class="skt-builder-timeline-content-wrap skt-builder-timeline-content-wrap-{{id}}{{#ifIsNthItem nth=2}} skt-builder-timeline-opposite-side{{/ifIsNthItem}}">
                                	<style>
                                    	.skt-builder-timeline-content-wrap-{{id}} .skt-builder-timeline-link:hover{color: {{columnLinkHoverTextColor}} !Important;}
                                    </style>
                                	<div class="skt-builder-timeline-arrow" style="border-color: {{columnBgColor}}"></div>
                                    <div class="skt-builder-timeline-number" style="background-color: {{columnNumberBgColor}}; color: {{columnNumberColor}};">{{columnNumber}}</div>
                                    <div class="skt-builder-timeline-content" style="background-color: {{columnBgColor}};">
                                    	<div class="skt-builder-timeline-timeleft"><img class="skt-builder-timeline-image" src="{{columnImage}}"></div>
                                        {{#if columnImage}}<div class="skt-builder-timeline-timeright">{{else}}<div class="skt-builder-timeline-timerightfull">{{/if}}
                                        	<h3 class="skt-builder-timeline-title" style="color: {{titleColor}};">{{title}}</h3>
                                            <div class="skt-builder-timeline-description" style="color: {{columnDescriptionColor}};">{{{columnDescription}}}</div>
                                        	<a href="{{columnLink}}" class="skt-builder-timeline-link" style="color: {{columnLinkTextColor}};" {{#if columnLinkTarget}}target="_blank"{{/if}}>{{columnLinkText}}</a>
                                        </div>
                                    </div>
                                </li>
                            {{/each_with_sort}}
                        {{/if}}
                    </ul>
                </div>
                <div style="clear: both"></div>
                <a class="skt-builder-block-column-button" href="{{blockButtonLink}}" {{#if blockButtonLinkTarget}}target="_blank"{{/if}}>{{blockButtonText}}</a>
            </div>
		</div>
	</div>
</div>
{{#if blockAnimation}}
<script>
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
    // This is then function used to detect if the element is scrolled into view
    function elementScrolled(elem)
    {
        var docViewTop = jQuery(window).scrollTop();
        var docViewBottom = docViewTop + jQuery(window).height();
        var elemTop = jQuery(elem).offset().top;
        return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
    }

	if (jQuery('.skt-builder-block-inner-{{id}}').length > 0) {
	if(elementScrolled('.skt-builder-block-inner-{{id}}')) {
        var els = jQuery('.skt-builder-block-inner-{{id}}'),
            i = 0,
            f = function () {
                jQuery(els[i++]).addClass('{{blockAnimationEffect}}');
                if(i < els.length) setTimeout(f, 400);
            };
        f();
    }}

});
});
</script>
{{/if}}