/**
* Output the inline css to head or after the element in case it is loaded via ajax
*/
function css()
{
$css = '';
$uid = $this->data['uid'];
$tpadding = $this->opt('top_padding') || $this->opt('top_padding') === '0' ? 'padding-top : ' . $this->opt('top_padding') . 'px;' : '';
$bpadding = $this->opt('bottom_padding') || $this->opt('bottom_padding') === '0' ? 'padding-bottom:' . $this->opt('bottom_padding') . 'px;' : '';
$css .= ".{$uid} .stage-ibx__stage { {$tpadding} {$bpadding} }";
$ibstg_points_color = $this->opt('ibstg_points_color', '#FFFFFF');
$css .= ".{$uid} .stage-ibx__point:after {background: " . zn_hex2rgba_str($ibstg_points_color, 60) . "; box-shadow: 0 0 0 3px " . $ibstg_points_color . "; }\n\t\t.{$uid} .stage-ibx__point:hover:after, .{$uid} .stage-ibx__point.is-hover:after { box-shadow: 0 0 0 5px " . $ibstg_points_color . ", 0 4px 10px #000; } ";
return $css;
}
$c_pos_vert = '';
if (isset($slide['io_slide_caption_pos_vert']) && !empty($slide['io_slide_caption_pos_vert'])) {
$c_pos_vert = $slide['io_slide_caption_pos_vert'];
}
// Slide Caption Position Vertical
$c_pos_horiz = '';
if (isset($slide['io_slide_caption_pos_horiz']) && !empty($slide['io_slide_caption_pos_horiz'])) {
$c_pos_horiz = $slide['io_slide_caption_pos_horiz'];
}
// Bottom fade effect inside slides
if (isset($options['io_s_fade']) && !empty($options['io_s_fade'])) {
$fadeColor = '#f5f5f5';
if (isset($options['io_s_fade_color']) && !empty($options['io_s_fade_color'])) {
$fadeColor = $options['io_s_fade_color'];
}
echo '<div class="fadeMask" style="background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,' . zn_hex2rgba_str($fadeColor, 0) . '), color-stop(100%,' . zn_hex2rgba_str($fadeColor, 100) . ')); background: -webkit-linear-gradient(top, ' . zn_hex2rgba_str($fadeColor, 0) . ' 0%,' . zn_hex2rgba_str($fadeColor, 100) . ' 100%); background: -webkit-linear-gradient(top, ' . zn_hex2rgba_str($fadeColor, 0) . ' 0%, ' . zn_hex2rgba_str($fadeColor, 100) . ' 100%); background: linear-gradient(to bottom, ' . zn_hex2rgba_str($fadeColor, 0) . ' 0%,' . zn_hex2rgba_str($fadeColor, 100) . ' 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#00' . str_replace('#', '', $fadeColor) . '", endColorstr="#ff' . str_replace('#', '', $fadeColor) . '",GradientType=0 );"></div>';
}
// START SLIDE CAPTIONS
$safepadding = 'kl-slideshow-safepadding';
// for the moment disable the padding
$safepadding = '';
echo '<div class="container ' . $safepadding . ' kl-iosslide-caption kl-ioscaption--' . $c_style . ' ' . $c_pos . ' klios-' . $c_pos_horiz . ' kl-caption-posv-' . $c_pos_vert . '">';
if ($is_screffect) {
echo '<div class="' . $scr_effect_class . '" ' . $scr_effect_attribs_captions . '>';
}
// Slide TOP!! SMALL TITLE (for style5)
if ($slideCaptionStyle != 'style6') {
if (isset($slide['io_slide_s_title_top']) && !empty($slide['io_slide_s_title_top']) && $slideCaptionStyle == 'style5') {
echo '<h4 class="title_small_top">' . $slide['io_slide_s_title_top'] . '</h4>';
}
}
/**
* Display the custom bottom mask markup
*
* @param [type] $bm The mask ID
*
* @return [type] HTML Markup to be used as mask
*/
public static function zn_background_source($args = array())
{
$defaults = array('source_type' => '', 'source_background_image' => array('image' => '', 'repeat' => 'repeat', 'attachment' => 'scroll', 'position' => array('x' => 'left', 'y' => 'top'), 'size' => 'auto'), 'source_vd_yt' => '', 'source_vd_self_mp4' => '', 'source_vd_self_ogg' => '', 'source_vd_self_webm' => '', 'source_vd_embed_iframe' => '', 'source_vd_vp' => '', 'source_vd_autoplay' => 'yes', 'source_vd_loop' => 'yes', 'source_vd_muted' => 'yes', 'source_vd_controls' => 'yes', 'source_vd_controls_pos' => 'bottom-right', 'source_overlay' => 0, 'source_overlay_color' => '', 'source_overlay_opacity' => 30, 'source_overlay_color_gradient' => '', 'source_overlay_color_gradient_opac' => 30, 'source_overlay_gloss' => '', 'enable_parallax' => '');
$args = wp_parse_args($args, $defaults);
$bg_source = '';
$sourceType = $args['source_type'];
if ($sourceType) {
if ($sourceType == 'image') {
$background_styles = array();
$background_image = $args['source_background_image']['image'];
$background_styles[] = 'background-image:url(' . $args['source_background_image']['image'] . ')';
$background_styles[] = 'background-repeat:' . $args['source_background_image']['repeat'];
$background_styles[] = 'background-attachment:' . $args['source_background_image']['attachment'];
$background_styles[] = 'background-position:' . $args['source_background_image']['position']['x'] . ' ' . $args['source_background_image']['position']['y'];
$background_styles[] = 'background-size:' . $args['source_background_image']['size'];
if (!empty($background_image)) {
$bg_details = 'style="' . implode(';', $background_styles) . '"';
if ($args['enable_parallax'] == 'yes') {
$bg_details = 'data-parallax="scroll" data-image-src="' . $background_image . '"';
}
$bg_source .= '<div class="kl-bg-source__bgimage" ' . $bg_details . '></div>';
}
} else {
if ($sourceType == 'video_self' || $sourceType == 'video_youtube') {
// Source Video
$bg_source .= '
<div class="kl-video-container kl-bg-source__video">
<div class="kl-video-wrapper video-grid-overlay">
';
if ($sourceType == 'video_self') {
$bg_source .= '
<!-- Self Hosted Video Source -->
<div
class="kl-video valign halign"
style="width: 100%; height: 100%;"
data-setup=\'{
"position": "absolute",
"loop": ' . ($args['source_vd_loop'] == 'yes' ? 'true' : 'false') . ',
"autoplay": ' . ($args['source_vd_autoplay'] == 'yes' ? 'true' : 'false') . ',
"muted": ' . ($args['source_vd_muted'] == 'yes' ? 'true' : 'false') . ',
' . ($args['source_vd_self_mp4'] ? '"mp4":"' . $args['source_vd_self_mp4'] . '",' : '') . '
' . ($args['source_vd_self_webm'] ? '"webm":"' . $args['source_vd_self_webm'] . '",' : '') . '
' . ($args['source_vd_self_ogg'] ? '"ogg":"' . $args['source_vd_self_ogg'] . '",' : '') . '
' . ($args['source_vd_vp'] ? '"fallback_image":"' . $args['source_vd_vp'] . '",' : '') . '
"video_ratio": "1.7778"
}\'
></div>';
} elseif ($sourceType == 'video_youtube') {
$bg_source .= '
<!-- Youtube Source -->
<div
class="kl-video valign halign"
style="width: 100%; height: 100%;"
data-setup=\'{
"position": "absolute",
"loop": ' . ($args['source_vd_loop'] == 'yes' ? 'true' : 'false') . ',
"autoplay": ' . ($args['source_vd_autoplay'] == 'yes' ? 'true' : 'false') . ',
"muted": ' . ($args['source_vd_muted'] == 'yes' ? 'true' : 'false') . ',
' . ($args['source_vd_yt'] ? '"youtube":"' . $args['source_vd_yt'] . '",' : '') . '
' . ($args['source_vd_vp'] ? '"fallback_image":"' . $args['source_vd_vp'] . '",' : '') . '
"video_ratio": "1.7778"
}\'
></div>';
}
if ($args['source_vd_controls'] == 'yes') {
$bg_source .= '
<ul class="kl-video--controls" data-position="' . $args['source_vd_controls_pos'] . '">
<li><a href="#" class="btn-toggleplay"><i class="kl-icon glyphicon glyphicon-play circled-icon"></i></a></li>
<li><a href="#" class="btn-audio"><i class="kl-icon glyphicon glyphicon-volume-up circled-icon ci-xsmall"></i></a></li>
</ul>';
}
$bg_source .= '
</div>
<!-- // video-wrapper -->
</div>
<!-- // video-container -->
';
} else {
if ($sourceType == 'embed_iframe') {
$source_vd_embed_iframe = $args['source_vd_embed_iframe'];
if (!empty($source_vd_embed_iframe)) {
// Source Video
$bg_source .= '<div class="kl-bg-source__iframe">';
$bg_source .= get_video_from_link($source_vd_embed_iframe, 'no-adjust', '100%');
$bg_source .= '</div>';
}
}
}
}
}
// Overlays
if ($args['source_overlay'] != 0) {
$overlay_color = $args['source_overlay_color'];
$overlay_opac = $args['source_overlay_opacity'];
$overlay_color_final = zn_hex2rgba_str($overlay_color, $overlay_opac);
$ovstyle = 'background-color:' . $overlay_color_final;
// Gradient
if ($args['source_overlay'] == 2 || $args['source_overlay'] == 3) {
$gr_overlay_color = $args['source_overlay_color_gradient'];
$overlay_gr_opac = $args['source_overlay_color_gradient_opac'];
$gr_overlay_color_final = zn_hex2rgba_str($gr_overlay_color, $overlay_gr_opac);
// Gradient Horizontal
if ($args['source_overlay'] == 2) {
$ovstyle = 'background:' . $overlay_color_final . '; background: -moz-linear-gradient(left, ' . $overlay_color_final . ' 0%, ' . $gr_overlay_color_final . ' 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,' . $overlay_color_final . '), color-stop(100%,' . $gr_overlay_color_final . ')); background: -webkit-linear-gradient(left, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: -o-linear-gradient(left, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: -ms-linear-gradient(left, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: linear-gradient(to right, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); ';
}
// Gradient Vertical
if ($args['source_overlay'] == 3) {
$ovstyle = 'background: ' . $overlay_color_final . '; background: -moz-linear-gradient(top, ' . $overlay_color_final . ' 0%, ' . $gr_overlay_color_final . ' 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,' . $overlay_color_final . '), color-stop(100%,' . $gr_overlay_color_final . ')); background: -webkit-linear-gradient(top, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: -o-linear-gradient(top, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: -ms-linear-gradient(top, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); background: linear-gradient(to bottom, ' . $overlay_color_final . ' 0%,' . $gr_overlay_color_final . ' 100%); ';
}
}
$bg_source .= '<div class="kl-bg-source__overlay" style="' . $ovstyle . '"></div>';
}
// Gloss Overlays
if ($args['source_overlay_gloss'] == 1) {
$bg_source .= '<div class="kl-bg-source__overlay-gloss"></div>';
}
if ($bg_source != '') {
echo '<div class="kl-bg-source">' . $bg_source . '</div>';
}
}
<?php
}
// Top Navigation Colors
if ($zn_top_nav_color = zget_option('zn_top_nav_color', 'color_options')) {
echo '.topnav-item, .topnav .menu-item a { color:' . $zn_top_nav_color . ' ;}';
}
if ($zn_top_nav_h_color = zget_option('zn_top_nav_h_color', 'color_options')) {
echo '.topnav-item:hover, .topnav .menu-item a:hover { color:' . $zn_top_nav_h_color . ' ;}';
}
// Various usages of the body color
if (isset($zn_body_def_color) && !empty($zn_body_def_color)) {
// Static content fade mask
echo '.sc__fade-mask, .portfolio-item-desc-inner:after { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,' . zn_hex2rgba_str($zn_body_def_color, 0) . '), color-stop(100%, ' . $zn_body_def_color . ')); background: -webkit-linear-gradient(top, ' . zn_hex2rgba_str($zn_body_def_color, 0) . ' 0%, ' . $zn_body_def_color . ' 100%); background: linear-gradient(to bottom, ' . zn_hex2rgba_str($zn_body_def_color, 0) . ' 0%, ' . $zn_body_def_color . ' 100%); }
';
// Laptop Slider Mask
echo '.ls-source__mask-front {background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,' . zn_hex2rgba_str($zn_body_def_color, 60) . '), color-stop(50%, ' . $zn_body_def_color . ')); background: -webkit-linear-gradient(top, ' . zn_hex2rgba_str($zn_body_def_color, 60) . ' 0%, ' . $zn_body_def_color . ' 50%); background: linear-gradient(to bottom, ' . zn_hex2rgba_str($zn_body_def_color, 60) . ' 0%, ' . $zn_body_def_color . ' 50%);}';
}
// Header background & text color for smaller than 480px devices
echo '@media (max-width: 767px) {';
if ($zn_header_resp_color = zget_option('zn_header_resp_color', 'color_options', false, '')) {
echo '.site-header {background-color: ' . $zn_header_resp_color . ' !important;}';
}
/**
* It seems it's not ok to force colors as there are 3 color presets already.
*/
// $header_resp_textcolor = zget_option( 'zn_header_resp_textcolor', 'color_options', false, '#fff' );
// echo '
// .site-header {color: '.$header_resp_textcolor.';}
// .site-header .xs-icon,
// .site-header .glyphicon-remove-circle,
// .site-header .kl-header-toptext,
function css()
{
//print_z($this);
$css = '';
$lg_css = '';
$uid = $this->data['uid'];
$pad_type = $this->opt('pad_type', '');
/**
* PADDING for LARGE Breakpoint
*/
// Old paddings, check if they're added;
$tpadding = $this->opt('top_padding') || $this->opt('top_padding') != '0' ? 'padding-top:' . $this->opt('top_padding') . '%;' : '';
$rpadding = $this->opt('right_padding') || $this->opt('right_padding') != '0' ? 'padding-right:' . $this->opt('right_padding') . '%;' : '';
$bpadding = $this->opt('bottom_padding') || $this->opt('bottom_padding') != '0' ? 'padding-bottom:' . $this->opt('bottom_padding') . '%;' : '';
$lpadding = $this->opt('left_padding') || $this->opt('left_padding') != '0' ? 'padding-left:' . $this->opt('left_padding') . '%;' : '';
$padding_css_lg = '';
// Padding large but old system
if (!empty($tpadding) || !empty($rpadding) || !empty($bpadding) || !empty($lpadding)) {
$padding_css_lg .= $tpadding . $rpadding . $bpadding . $lpadding;
} else {
$padding_css_lg = zn_add_boxmodel($this->opt('cc_padding_lg', array('top' => '1%')), 'padding');
}
$padding_css_md = zn_add_boxmodel($this->opt('cc_padding_md', ''), 'padding');
$padding_css_sm = zn_add_boxmodel($this->opt('cc_padding_sm', ''), 'padding');
$padding_css_xs = zn_add_boxmodel($this->opt('cc_padding_xs', ''), 'padding');
$margin_css_lg = zn_add_boxmodel($this->opt('cc_margin_lg', ''), 'margin');
$margin_css_md = zn_add_boxmodel($this->opt('cc_margin_md', ''), 'margin');
$margin_css_sm = zn_add_boxmodel($this->opt('cc_margin_sm', ''), 'margin');
$margin_css_xs = zn_add_boxmodel($this->opt('cc_margin_xs', ''), 'margin');
// Load margin & padding for LARGE breakpoint
if (!empty($padding_css_lg)) {
$lg_css .= $padding_css_lg;
}
if (!empty($margin_css_lg)) {
$lg_css .= $margin_css_lg;
}
//** Set the background image for the container
$stored_background = $this->opt('background_image', false);
$background_image = '';
if ($stored_background && !empty($stored_background['image'])) {
$background_image = "background-image: url('" . $stored_background['image'] . "');";
$background_image .= 'background-repeat:' . $stored_background['repeat'] . ';';
$background_image .= 'background-position:' . $stored_background['position']['x'] . ' ' . $stored_background['position']['y'] . ';';
$background_image .= 'background-attachment:' . $stored_background['attachment'] . ';';
$background_image .= 'background-size:' . $stored_background['size'] . ';';
}
//** Set the background color for the container
$bkg_color = '';
//Check old colorpicker
$old_background_color = $this->opt('background_color', '');
$old_background_color_opacity = $this->opt('background_color_opacity', '100');
if (isset($old_background_color) && !empty($old_background_color)) {
$bkg_color = $old_background_color;
if (isset($old_background_color_opacity) && !empty($old_background_color_opacity)) {
$bkg_color = zn_hex2rgba_str($old_background_color, $old_background_color_opacity);
}
} else {
$bkg_color = $this->opt('normal_bgcolor', '');
}
// Add the style
if (!empty($bkg_color)) {
$bkg_color = " background-color:" . $bkg_color . " !important; ";
}
//** Set the border for the container
$border = "";
$border_style = $this->opt('border_style', 'none');
if ($border_style !== 'none') {
$border_width = $this->opt('border_width', 0);
$border_color = $this->opt('border_color', 'transparent');
$border = " border-style:{$border_style}; border-width:{$border_width}px; border-color:{$border_color};";
// shorten up if all are set
if ($border_style != 'none' && !empty($border_width) && !empty($border_color)) {
$border = " border:{$border_style} {$border_width}px {$border_color};";
}
}
//** Set the corner radius
$border_radius = "";
$corner_radius = $this->opt('corner_radius', '');
if (!empty($corner_radius)) {
$border_radius = "border-radius:{$corner_radius}px;";
}
// LOAD STYLES FOR LARGE (DEFAULT)
if (!empty($background_image) || !empty($bkg_color) || !empty($border) || !empty($border_radius) || !empty($padding_css_lg) || !empty($margin_css_lg)) {
$css .= '.' . $uid . '{';
$css .= $background_image;
$css .= $bkg_color;
$css .= $border;
$css .= $border_radius;
$css .= $lg_css;
$css .= "}";
}
// Load margin & padding for MEDIUM breakpoint
if (!empty($padding_css_md) || !empty($margin_css_md)) {
$css .= '@media screen and (min-width: 992px) and (max-width: 1199px){.' . $uid . '{';
if (!empty($padding_css_md)) {
$css .= $padding_css_md;
}
if (!empty($margin_css_md)) {
$css .= $margin_css_md;
}
$css .= '}}';
}
// Load margin & padding for SMALL breakpoint
if (!empty($padding_css_sm) || !empty($margin_css_sm)) {
$css .= '@media screen and (min-width: 768px) and (max-width:991px){.' . $uid . '{';
if (!empty($padding_css_sm)) {
$css .= $padding_css_sm;
}
if (!empty($margin_css_sm)) {
$css .= $margin_css_sm;
}
$css .= '}}';
}
// Load margin & padding for EXTRA SMALL breakpoint
if (!empty($padding_css_xs) || !empty($margin_css_xs)) {
$css .= '@media screen and (max-width: 767px){.' . $uid . '{';
if (!empty($padding_css_xs)) {
$css .= $padding_css_xs;
}
if (!empty($margin_css_xs)) {
$css .= $margin_css_xs;
}
$css .= '}}';
}
return $css;
}
/**
* This method is used to display the output of the element.
* @return void
*/
function element()
{
$options = $this->data['options'];
if (empty($options)) {
return;
}
$all = 0;
if (isset($options['single_css_panel']) && is_array($options['single_css_panel'])) {
$all = count($options['single_css_panel']);
}
$sheight = $this->opt('css_height', '600');
$panels_resize = 'css3panels--resize';
if (isset($options['panel_resize'])) {
$panels_resize = $options['panel_resize'] ? 'css3panels--resize' : '';
}
$elm_classes = array();
$elm_classes[] = $this->data['uid'];
$elm_classes[] = $this->opt('css_class', '');
// Flexbox Engine disable
$elm_classes[] = $panel_flexbox = $this->opt('panel_flexbox', '1') != '1' ? 'no-flexbox' : 'css3p--flexbox';
?>
<div class="kl-slideshow kl-slideshow-css3panels <?php
echo implode(' ', $elm_classes);
?>
">
<div class="clearfix"></div>
<div class="fake-loading loading-1s"></div>
<div class="css3panels-container <?php
echo $panels_resize;
?>
<?php
echo isset($options['panel_caption_effect']) ? 'cssp-capt-animated cssp-capt-' . $options['panel_caption_effect'] : '';
?>
" data-panels="<?php
echo $all;
?>
" style="<?php
echo 'height:' . $sheight . 'px';
?>
">
<?php
if (isset($options['single_css_panel']) && is_array($options['single_css_panel'])) {
$i = 1;
foreach ($options['single_css_panel'] as $panel) {
echo '<div class="css3panel css3panel--' . $i . ' cp-theme--' . (isset($panel['panel_text_theme']) ? $panel['panel_text_theme'] : 'light') . '">';
echo '<div class="css3panel-inner" style=" height:' . $sheight . 'px " >';
echo '<div class="css3panel-mainimage-wrapper" style=" height:' . $sheight . 'px " >';
if (isset($panel['panel_image']) && !empty($panel['panel_image'])) {
echo '<div style="background-image:url(' . $panel['panel_image'] . '); " class="css3panel-mainimage">';
if (isset($options['panel_effect']) && !empty($options['panel_effect'])) {
echo '<div style="background-image:url(' . $panel['panel_image'] . '); " class="css3panel-mainimage css3panel-mainimage-effect ' . $options['panel_effect'] . '"></div>';
}
// check if overlay is enabled
if (isset($panel['panel__overlay']) && $panel['panel__overlay'] && isset($panel['panel__overlay_color'])) {
echo '<div class="css3p-overlay css3p--overlay-color" style="background: ' . zn_hex2rgba_str($panel['panel__overlay_color'], $panel['panel__overlay_opacity']) . '"></div>';
} else {
echo '<div class="css3p-overlay css3p-overlay--gradient"></div>';
}
echo '</div>';
}
echo '</div>';
echo '</div>';
// Panel Position
$panel_position = '';
if (isset($panel['panel_title_position']) && !empty($panel['panel_title_position'])) {
$panel_position = 'css3caption--middle';
}
// Panel Content
if (isset($panel['panel_title']) && !empty($panel['panel_title']) || isset($panel['panel_text']) && !empty($panel['panel_text'])) {
echo '<div class="css3panel-caption ' . $panel_position . ' ">';
// Panel title
if (isset($panel['panel_title']) && !empty($panel['panel_title'])) {
$title_link = zn_extract_link($panel['title_link']);
echo $title_link['start'];
echo '<h3 class="css3panel-title ff-alternative ' . (isset($panel['panel_title_style']) ? $panel['panel_title_style'] : '') . ' ' . (isset($panel['panel_title_size']) ? 'title-size-' . $panel['panel_title_size'] : '') . '">' . $panel['panel_title'] . '</h3>';
echo $title_link['end'];
}
// Panel text
if (isset($panel['panel_text']) && !empty($panel['panel_text'])) {
echo '<div class="css3panel-text">' . $panel['panel_text'] . '</div>';
}
echo '<div class="css3panel-btn-area">';
// Panel Primary Button
if (isset($panel['title_link']['title']) && !empty($panel['title_link']['title'])) {
$prim_link = zn_extract_link($panel['title_link'], 'btn btn-fullcolor btn-skewed');
echo $prim_link['start'] . $panel['title_link']['title'] . $prim_link['end'];
}
// Panel Secondary Button
if (isset($panel['sec_link']['title']) && !empty($panel['sec_link']['title'])) {
$sec_link = zn_extract_link($panel['sec_link'], 'btn btn-lined btn-skewed');
echo $sec_link['start'] . $panel['sec_link']['title'] . $sec_link['end'];
}
echo '</div><!-- /.btn-area -->';
echo '</div><!-- /.css3panel-caption -->';
}
echo '</div>';
$i++;
}
}
?>
</div>
<!-- end panels -->
<div class="clearfix"></div>
<div class="kl-bottommask kl-bottommask--shadow_ud"></div>
</div><!-- end kl-slideshow -->
<?php
}
