<!-- REVOLUTION SLIDER -->
<div id="rev_slider_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" data-alias="image-hero39" data-source="gallery">
    <!-- START REVOLUTION SLIDER 5.3.0.2 fullwidth mode -->
    <div id="rev_slider_1" class="rev_slider fullwidthabanner" style="display:none;" data-version="5.3.0.2" >
        <ul>
            {% for item in banners %}
            <li data-index="rs-{{ forloop.index }}" data-transition="slidevertical" data-slotamount="1" data-hideafterloop="0" data-hideslideonmobile="off"  data-easein="default" data-easeout="default" data-masterspeed="1500"  data-thumb="../../images/slider/concept-1-100x50.jpg"  data-rotate="0"  data-fstransition="fade" data-fsmasterspeed="1500" data-fsslotamount="7" data-saveperformance="off"  data-title="{{ item.title }}" data-param1="" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">
                <!-- MAIN IMAGE -->
                <a href="{{ item.banner_url }}">
                    {% assign image_url = item.image_url %}
                    {% if image_url contains 'http' %}
                        <img src="{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                    {% else %}
                        <img src="{{ site.image_base_url }}{{ image_url }}" alt="" data-bgposition="top center" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-no-retina>
                    {% endif %}
                </a>

                <!-- LAYER NR. 2 -->
                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-2-layer-2"
                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['0','0','0','0']"
                     data-fontsize="['16','16','16','16']"
                     data-lineheight="['16','16','16','16']"
                     data-width="[300, 300, 300, 300]"
                     data-height="none"
                     data-whitespace="nowrap"
                     data-type="text"
                     data-responsive_offset="on"
                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":500,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                     data-textAlign="['left','left','left','left']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     style="z-index: 11; white-space: nowrap;text-transform:left;">

                    <span class="text-uppercase strong-400">	{{ item.subtitle }}</span>

                </div>
                <div class="tp-caption title--style-1 c-white tp-resizeme" id="slide-1-layer-3"
                     data-x="['right','right','right','right']" data-hoffset="['0','0','50','50']"
                     data-y="['middle','middle','middle','middle']" data-voffset="['70','70','70','70']"
                     data-fontsize="['40','40','40','40']"
                     data-lineheight="['50','40','40','40']"
                     data-width="[300, 300, 300, 300]"
                     data-height="none"
                     data-whitespace="nowrap"
                     data-type="text"
                     data-responsive_offset="on"
                     data-frames='[{"from":"x:-50px;opacity:0;","speed":1000,"to":"o:1;","delay":1000,"ease":"Power2.easeOut"},{"delay":"wait","speed":1500,"to":"opacity:0;","ease":"Power4.easeIn"}]'
                     data-textAlign="['left','left','left','left']"
                     data-paddingtop="[0,0,0,0]"
                     data-paddingright="[0,0,0,0]"
                     data-paddingbottom="[0,0,0,0]"
                     data-paddingleft="[0,0,0,0]"
                     style="z-index: 11; white-space: nowrap;text-transform:left;">


                    <span class="strong-600">
					{{ item.title }}
					</span>
                </div>
            </li>
            {% endfor %}
        </ul>
        <div class="tp-bannertimer tp-bottom" style="visibility: hidden !important;"></div>
    </div>
</div><!-- END REVOLUTION SLIDER -->
