<ul class="pro-img-list numbercolumns-${xf.ViewXmlSetting("numbercolumns",4)} numberLarge-${xf.ViewXmlSetting("numbercolumnsLarge",5)} numbertablet-${xf.ViewXmlSetting("numbercolumnstablet",3)} numberphone-${xf.ViewXmlSetting("numbercolumnsphone",1)} $ThemeName" id="pro-img-list${ModuleID}">
    #if($SliderList.Count > 0) 
        #foreach($SliderItem in $SliderList)
            #set( $SingleSettingTitle		= ${xf.ViewSliderSetting($SliderItem,"SingleSettingTitle","false")}			) 
            #set( $SingleSettingDescription	= ${xf.ViewSliderSetting($SliderItem,"SingleSettingDescription","false")}	) 
            #set( $SingleSettingEffect		= ${xf.ViewSliderSetting($SliderItem,"SingleSettingEffect","false")}		)
            #set( $SingleSettingBorder		= ${xf.ViewSliderSetting($SliderItem,"SingleSettingBorder","false")}		)
            #set( $SingleSettingOther		= ${xf.ViewSliderSetting($SliderItem,"SingleSettingOther","false")}			)
            
            #set( $PictureLinkType			= ${xf.ViewSliderSetting($SliderItem,"PictureLinkType","Link")}				)
            #set( $IconLinkType				= ${xf.ViewSliderSetting($SliderItem,"IconLinkType","Link")}				)
            #set( $RightIconLinkType		= ${xf.ViewSliderSetting($SliderItem,"RightIconLinkType","Link")}			)
            #set( $Title					= ${xf.ViewSliderSetting($SliderItem,"Title","")}							)

            #if($SingleSettingTitle=="true")
                #set( $DisplayTitle				= ${xf.ViewSliderSetting($SliderItem,"DisplayTitle","true")}			)  
                #set( $TitleFontSize			= ${xf.ViewSliderSetting($SliderItem,"TitleFontSize","15")}				)  
                #set( $TitleFontColor			= ${xf.ViewSliderSetting($SliderItem,"TitleFontColor","#333333")}		) 
            #else
                #set( $DisplayTitle				= ${xf.ViewXmlSetting("DisplayTitle","true")}				)  
                #set( $TitleFontSize			= ${xf.ViewXmlSetting("TitleFontSize","15")}				)  
                #set( $TitleFontColor			= ${xf.ViewXmlSetting("TitleFontColor","#333333")}			) 
            #end 
            
            #if($SingleSettingDescription=="true")
                #set( $DisplayContent			= ${xf.ViewSliderSetting($SliderItem,"DisplayContent","true")}			) 
                #set( $ContentFontSize			= ${xf.ViewSliderSetting($SliderItem,"ContentFontSize","13")}			) 
                #set( $ContentFontColor			= ${xf.ViewSliderSetting($SliderItem,"ContentFontColor","#555555")}		)
            #else 
                #set( $DisplayContent			= ${xf.ViewXmlSetting("DisplayContent","true")}				) 
                #set( $ContentFontSize			= ${xf.ViewXmlSetting("ContentFontSize","13")}				) 
                #set( $ContentFontColor			= ${xf.ViewXmlSetting("ContentFontColor","#555555")}		)
            #end 
            #if($SingleSettingEffect=="true")
                #set( $ContentStyle				= ${xf.ViewSliderSetting($SliderItem,"ContentStyle","ico_LeftAndRight_enter")}	) 
                #set( $shadeBackground			= ${xf.ViewSliderSetting($SliderItem,"shadeBackground","#333333")}				) 
                #set( $shadeBgOpacity			= ${xf.ViewSliderSetting($SliderItem,"shadeBgOpacity","50")}					) 
                #set( $leftIconEnable			= ${xf.ViewSliderSetting($SliderItem,"leftIconEnable","true")}					) 
                #set( $IconleftStyle			= ${xf.ViewSliderSetting($SliderItem,"IconleftStyle","fa fa-link")}				) 
                #set( $IconleftBackground		= ${xf.ViewSliderSetting($SliderItem,"IconleftBackground","#69b532")}			) 
                #set( $rightIconEnable			= ${xf.ViewSliderSetting($SliderItem,"rightIconEnable","true")}					) 
                #set( $IconrightStyle			= ${xf.ViewSliderSetting($SliderItem,"IconrightStyle","fa fa-search")}			) 
                #set( $IconrightBackground		= ${xf.ViewSliderSetting($SliderItem,"IconrightBackground","#69b532")}			) 
                #set( $Picturehoverzoom			= ${xf.ViewSliderSetting($SliderItem,"Picturehoverzoom","false")}				) 
            #else 
                #set( $ContentStyle				= ${xf.ViewXmlSetting("ContentStyle","ico_LeftAndRight_enter")}	) 
                #set( $shadeBackground			= ${xf.ViewXmlSetting("shadeBackground","#333333")}				) 
                #set( $shadeBgOpacity			= ${xf.ViewXmlSetting("shadeBgOpacity","50")}					) 
                #set( $leftIconEnable			= ${xf.ViewXmlSetting("leftIconEnable","true")}					) 
                #set( $IconleftStyle			= ${xf.ViewXmlSetting("IconleftStyle","fa fa-link")}			) 
                #set( $IconleftBackground		= ${xf.ViewXmlSetting("IconleftBackground","#69b532")}			) 
                #set( $rightIconEnable			= ${xf.ViewXmlSetting("rightIconEnable","true")}				) 
                #set( $IconrightStyle			= ${xf.ViewXmlSetting("IconrightStyle","fa fa-search")}			) 
                #set( $IconrightBackground		= ${xf.ViewXmlSetting("IconrightBackground","#69b532")}			) 
                #set( $Picturehoverzoom			= ${xf.ViewXmlSetting("Picturehoverzoom","false")}				) 
            #end 
            #if($SingleSettingBorder=="true")
                #set( $Itemborder				= ${xf.ViewSliderSetting($SliderItem,"Itemborder","false")}				) 
                #set( $BorderColor				= ${xf.ViewSliderSetting($SliderItem,"BorderColor","#333333")}			) 
                #set( $BorderWidth				= ${xf.ViewSliderSetting($SliderItem,"BorderWidth","1")}				) 
                #set( $BorderStyle				= ${xf.ViewSliderSetting($SliderItem,"BorderStyle","solid")}			) 
                #set( $BorderPadding			= ${xf.ViewSliderSetting($SliderItem,"BorderPadding","5")}				) 
            #else 
                #set( $Itemborder				= ${xf.ViewXmlSetting("Itemborder","false")}				) 
                #set( $BorderColor				= ${xf.ViewXmlSetting("BorderColor","#333333")}				) 
                #set( $BorderWidth				= ${xf.ViewXmlSetting("BorderWidth","1")}					) 
                #set( $BorderStyle				= ${xf.ViewXmlSetting("BorderStyle","solid")}				) 
                #set( $BorderPadding			= ${xf.ViewXmlSetting("BorderPadding","5")}					) 
            #end 
            #if($SingleSettingOther=="true")
                #set( $BoxbgColor				= ${xf.ViewSliderSetting($SliderItem,"BoxbgColor","#FFFFFF")}					) 
                #set( $TextPadding				= ${xf.ViewSliderSetting($SliderItem,"TextPadding","5")}						) 
                #set( $ShadowStyle				= ${xf.ViewSliderSetting($SliderItem,"ShadowStyle","none")}						) 
            #else 
                #set( $BoxbgColor				= ${xf.ViewXmlSetting("BoxbgColor","#FFFFFF")}				) 
                #set( $TextPadding				= ${xf.ViewXmlSetting("TextPadding","5")}					) 
                #set( $ShadowStyle				= ${xf.ViewXmlSetting("ShadowStyle","none")}				) 
            #end 
            <li>
                <div class="pro-photo $ContentStyle #if($Picturehoverzoom=="true") img_zoom #end  #if($ShadowStyle!="none")$ShadowStyle #end" style="background-color:$BoxbgColor"> 
                  #if($Itemborder=="true")
                      <div class="pro-border" style="border:$BorderColor ${BorderWidth}px $BorderStyle;padding:${BorderPadding}px">
                  #end
                <div class="pic_box"> 
                  #if( $PictureLinkType == "Link")
                      <a href="${xf.PictureUrl($SliderItem,"PictureLink","http://")}" target="${xf.ViewSliderSetting($SliderItem,"PictureLinkTarget","_blank")}" class="imgLink" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}"></a>
                  #elseif($PictureLinkType == "prolight_image")
                      <a href="${xf.PictureUrl($SliderItem,"PictureImages","http://")}" class="prolight_image_gallery${ModuleID} imgLink" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}"></a>
                  #elseif($PictureLinkType == "prolight_youtube")
                      <a href="${xf.PictureUrl($SliderItem,"Pictureyoutube","http://")}" class="prolight_youtube_gallery${ModuleID} imgLink" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}"></a>
                  #elseif($PictureLinkType == "prolight_vimeo")
                      <a href="${xf.PictureUrl($SliderItem,"Picturevimeo","http://")}" class="prolight_vimeo_gallery${ModuleID} imgLink" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}"></a>
                  #elseif($PictureLinkType == "prolight_gmaps")
                      <a href="${xf.PictureUrl($SliderItem,"Picturegmaps","http://")}" class="prolight_gmaps_gallery${ModuleID} imgLink" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}"></a>
                  #end
                      <img src="${xf.PictureUrl($SliderItem,"Picture","")}" alt="#if(${xf.ViewSliderSetting($SliderItem,"imagealt","")}=="")$Title#else${xf.ViewSliderSetting($SliderItem,"imagealt","")}#end" />
                  <div class="shade"><span style="background-color:$shadeBackground; opacity:${xf.Division(${shadeBgOpacity},"100")}; filter:alpha(opacity=$shadeBgOpacity);"></span></div>
                  <div class="ico">
                      #if( $leftIconEnable == "true")
                          #if( $IconLinkType == "Link")
                              <a href="${xf.PictureUrl($SliderItem,"LeftIconLink","http://")}" target="${xf.ViewSliderSetting($SliderItem,"LeftIconLinkTarget","_blank")}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif($IconLinkType == "prolight_image")
                              <a href="${xf.PictureUrl($SliderItem,"LeftIconImages","http://")}" class="prolight_image_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif($IconLinkType == "prolight_youtube")
                              <a href="${xf.PictureUrl($SliderItem,"LeftIconyoutube","http://")}" class="prolight_youtube_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif($IconLinkType == "prolight_vimeo")
                              <a href="${xf.PictureUrl($SliderItem,"LeftIconvimeo","http://")}" class="prolight_vimeo_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif($IconLinkType == "prolight_gmaps")
                              <a href="${xf.PictureUrl($SliderItem,"LeftIcongmaps","http://")}" class="prolight_gmaps_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #end
                              <span class="$IconleftStyle ico-left" style="background-color:$IconleftBackground"></span>
                          #if($IconLinkType != "None") 
                             </a>
                          #end  
                      #end  
                      #if( $rightIconEnable == "true")
                          #if( $RightIconLinkType == "Link")
                              <a href="${xf.PictureUrl($SliderItem,"RightIconLink","http://")}" target="${xf.ViewSliderSetting($SliderItem,"RightIconLinkTarget","_blank")}"  title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif( $RightIconLinkType == "prolight_image")
                              <a href="${xf.PictureUrl($SliderItem,"RightIconImages","http://")}" class="prolight_image_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif( $RightIconLinkType == "prolight_youtube")
                              <a href="${xf.PictureUrl($SliderItem,"RightIconyoutube","http://")}" class="prolight_youtube_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif( $RightIconLinkType == "prolight_vimeo")
                              <a href="${xf.PictureUrl($SliderItem,"RightIconvimeo","http://")}" class="prolight_vimeo_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #elseif( $RightIconLinkType == "prolight_gmaps")
                              <a href="${xf.PictureUrl($SliderItem,"RightIcongmaps","http://")}" class="prolight_gmaps_gallery${ModuleID}" title="$Title" data-effect="${xf.ViewXmlSetting("lightboxanimation","mfp-zoom-in")}">
                          #end
                          <span class="$IconrightStyle ico-right"  style="background-color:$IconrightBackground"></span>
                          #if( $RightIconLinkType != "None") 
                             </a>
                          #end  
                      #end  
                  </div>
                </div>
                  <div class="content" style="padding:${TextPadding}px">
                    <div class="vertical_center_1">
                      <div class="vertical_center_2" >
                        #if( $Title != "" && $DisplayTitle	== "true")
                            <h3 style="font-size:${TitleFontSize}px;color:${TitleFontColor}">
                                $Title
                            </h3>
                        #end
                        #if( ${xf.ViewSliderSetting($SliderItem,"ContentHtml","")} != "" && $DisplayContent=="true" )
                            <div style="font-size:${ContentFontSize}px;color:$ContentFontColor"> 
                                ${xf.ViewSliderSetting($SliderItem,"ContentHtml","")} 
                            </div>
                         #end
                      </div>
                    </div>
                  </div>
                  
                #if($Itemborder=="true") 
                    </div> 
                #end 
                </div>  
                          </li>
            
        #end
    #end
</ul>
<div class="pro-img-pager $ThemeName">
${Pager}
</div>
 
 
<style type="text/css">
#pro-img-list${ModuleID}{
	margin:0 0 0 -${xf.ViewXmlSetting("Itemspacing",3)}px;
}
#pro-img-list${ModuleID} .pro-photo{
	margin:0 0 ${xf.ViewXmlSetting("Itemspacing",3)}px ${xf.ViewXmlSetting("Itemspacing",3)}px ;
}
#flip-list${ModuleID}.numbercolumns-${xf.ViewXmlSetting("numbercolumns",4)} li:nth-child(${xf.ViewXmlSetting("numbercolumns",4)}n+1) {
	clear:left;
}	
@media only screen and (min-width: 1200px) {
	#pro-img-list${ModuleID}.pro-img-list.numbercolumns-${xf.ViewXmlSetting("numbercolumns",4)} li{
		clear:none;
	}
	#pro-img-list${ModuleID}.numberLarge-${xf.ViewXmlSetting("numbercolumnsLarge",5)} li:nth-child(${xf.ViewXmlSetting("numbercolumnsLarge",5)}n+1) {
		clear:left;
	}	
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
	#pro-img-list${ModuleID}.pro-img-list.numbercolumns-${xf.ViewXmlSetting("numbercolumns",4)} li{
		clear:none;
	}
	#pro-img-list${ModuleID}.numbertablet-${xf.ViewXmlSetting("numbercolumnstablet",3)} li:nth-child(${xf.ViewXmlSetting("numbercolumnstablet",3)}n+1) {
		clear:left;
	}	
}
@media only screen and (max-width: 767px) {
	#pro-img-list${ModuleID}.pro-img-list.numbercolumns-${xf.ViewXmlSetting("numbercolumns",4)} li{
		clear:none;
	}
	#pro-img-list${ModuleID}.numberphone-${xf.ViewXmlSetting("numbercolumnsphone",1)} li:nth-child(${xf.ViewXmlSetting("numbercolumnsphone",1)}n+1) {
		clear:left;
	}	

}
</style>