<style>
.section-two .inner-box .svg.image {
width: 4.2rem;
height: 4.2rem;
margin: 0.5rem auto 0rem;
}
.section-two .inner-box .svg.image .lottie-wrap {
width: 4.2rem;
height: 4.2rem;
}
</style>
<script>
function animate_elems() {
wintop = jQuery(window).scrollTop(); // calculate distance from top of window
$elm_menu = jQuery('.menu-fixed-position-wrap');
$elm_menu_end = jQuery('.empty-div-to-detect-and-of-stikey-side-menu');
// loop through each item to check when it animates
$elems.each(function(){
$elm = jQuery(this);
// if($elm.hasClass('active')) { return true; } // if already animated skip to the next item
topcoords = $elm.offset().top; // element's distance from top of page in pixels
if(windowWidth767()){
//desktop
if(wintop > (topcoords - (winheight*.90))) {
// animate when top of the window is 3/4 above the element
if(!($elm.hasClass('active'))){
$elm.addClass('active');
if($elm.hasClass('lottie-wrap')){
src = '';
src = $elm.attr('data-lottiesrc');
if($elm.hasClass('hover')){
if($elm.hasClass('initial-ani')){
$elm.append('<lottie-player class="lottie" src="'+src+'" background="transparent" speed="1" autoplay ></lottie-player>');
}else{
$elm.append('<lottie-player class="lottie" src="'+src+'" background="transparent" speed="1" ></lottie-player>');
}
}else{
$elm.append('<lottie-player class="lottie" src="'+src+'" background="transparent" speed="1" autoplay loop ></lottie-player>');
}
let lottiePlayer = $elm.find('lottie-player')[0];
lottiePlayer.play();
}
if($elm.hasClass('divider-initial')){
divider_initial();
}
}
}
}else{
//mobile
if(wintop > (topcoords - (winheight*.8))) {
// animate when top of the window is 3/4 above the element
if(!($elm.hasClass('active'))){
$elm.addClass('active');
if($elm.hasClass('lottie-wrap')){
src = '';
src = $elm.attr('data-lottiesrc');
$elm.append('<lottie-player class="lottie" src="'+src+'" background="transparent" speed="1" autoplay loop ></lottie-player>');
}
}
}
}
});
jQuery('.section-two .content .inner-box').mouseenter('click',function(e){
$elm = '';
$elm = jQuery(this).find('.icon.lottie-wrap.hover.initial-ani');
//console.log('a');
if($elm.hasClass('lottie-wrap')){
//console.log('b');
$elm.html('');
src = '';
src = $elm.attr('data-lottiesrc');
$elm.append('<lottie-player class="lottie" src="'+src+'" background="transparent" speed="1" autoplay loop count="2" ></lottie-player>');
}
});
</script>
<?php
$str = '';
$str = 'section_two_bg';
$bgStyle = ''; $bgStyle = get_bg('full', get_sub_field($str.'_image_desktop'),get_sub_field($str.'_image_laptop'),get_sub_field($str.'_image_tablet'),get_sub_field($str.'_image_mobile'));
$section_padding = '';
$section_padding = get_sub_field($str.'_section_padding');
if($section_padding){
$section_padding = 'section-'.$section_padding;
}
$header_container = '';
$header_container = get_sub_field($str.'_header_container');
$header_container_width = '';
$header_container_width = get_sub_field($str.'_header_container_width');
$content_container = '';
$content_container = get_sub_field($str.'_content_container');
$content_container_width = '';
$content_container_width = get_sub_field($str.'_content_container_width');
$font_size = '';
$font_size = get_sub_field($str.'_font_size');
$header_image = '';
$header_image = get_sub_field($str.'_header_image');
$header_image_mobile = '';
$header_image_mobile = get_sub_field($str.'_header_image_mobile');
$header_video = '';
$header_video = get_sub_field($str.'_header_video');
$header_video_mobile = '';
$header_video_mobile = get_sub_field($str.'_header_video_mobile');
$section_class = '';
$section_class = get_sub_field($str.'_class');
$scrolltrue = false;
$scrolltrue = get_sub_field($str.'_scroll_true');
$icontrue = false;
$icontrue = get_sub_field($str.'_icon_box_true');
$page_typeclass = '';
$page_typeclass = get_sub_field($str.'_page_type');
$number_box = '4';
$number_box = get_sub_field($str.'_number_box');
$number_col = '';
switch ($number_box) {
case '6':
$number_col = 2;
break;
case '4':
$number_col = 3;
break;
case '3':
$number_col = 4;
break;
case '2':
$number_col = 6;
break;
default:
}
?>
<section id="<?php the_sub_field($str.'_id'); ?>" class="section-<?php echo get_row_layout(); ?> <?php echo $section_class; ?> <?php echo $page_typeclass; ?> <?php if($header_image){ ?> text-over-image <?php } ?> font-<?php the_sub_field($str.'_font_color'); ?> font-weight-<?php the_sub_field($str.'_font_weight'); ?> font-heading-<?php the_sub_field($str.'_heading_font_color'); ?> <?php echo $font_size; ?>" style="background-color: <?php the_sub_field($str.'_background_color'); ?>">
<div class="responsive-bg" <?php echo $bgStyle; ?>>
<div class="<?php echo $section_padding; ?>">
<?php if( get_sub_field('section_two_header') ){ ?>
<div class="header-container ani transition opacity fade-up container container-<?php echo $header_container; ?> ">
<div class="head margin-bottom center" <?php echo $header_container_width ? 'style="margin-right: auto;margin-left: auto;width: '.$header_container_width.'%; "' : '' ; ?>>
<?php the_sub_field('section_two_header'); ?>
</div>
</div>
<?php } ?>
<div class="ani transition opacity fade-up container container-<?php echo $content_container; ?> ">
<div class="content flex-row" <?php echo $content_container_width ? 'style="margin-right: auto;margin-left: auto;width: '.$content_container_width.'%; "' : '' ; ?>>
<?php if( have_rows('section_two_list') ){ ?>
<?php while ( have_rows('section_two_list') ) { the_row(); ?>
<div class="flex-<?php echo $number_col; ?> box">
<div class="inner-box center">
<div class="svg image">
<?php
$img = '';
$img = get_sub_field('section_two_list_icon');
$lottie = '';
$lottie = get_sub_field('section_two_list_lottie');
if($lottie){ ?>
<div class="icon lottie-wrap ani hover initial-ani" data-lottiesrc="<?php echo $lottie; ?>" ></div>
<?php } else { if($img){ ?>
<img class="lazyload" data-src="<?php echo $img['url']; ?>" alt="<?php echo $img['alt']; ?>">
<?php } } ?>
</div>
<?php if( get_sub_field('section_two_list_text') ){ ?>
<div class="text">
<?php the_sub_field('section_two_list_text'); ?>
</div>
<?php } ?>
<?php
$btnpostion = "";
$btnpostion = get_sub_field('buttons_position');
?>
<?php if( have_rows('buttons') ){ ?>
<div class="button-wrap <?php echo $btnpostion; ?>">
<?php while ( have_rows('buttons') ) { the_row(); ?>
<?php
$popup = false;
$tag = '';
$popup = get_sub_field('buttons_popup');
$color_type = get_sub_field('buttons_color_type');
$tag = get_sub_field('buttons_tag');
$link = get_sub_field('buttons_button');
if( $link ){
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a
<?php if(!$popup){ ?>
class="button <?php echo $color_type; ?>" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"
<?php }else{ ?>
<?php if($tag){ ?>
<?php if($tag=='iframe'){ ?>
class="button <?php echo $color_type; ?> play-video" data-vid_type="iframe" data-vid="<?php echo esc_url( $link_url ); ?>"
<?php } ?>
<?php if($tag=='video'){ ?>
class="button <?php echo $color_type; ?> play-video" data-vid_type="video" data-vid="<?php echo esc_url( $link_url ); ?>"
<?php } ?>
<?php } ?>
<?php } ?>
><span><?php echo esc_html( $link_title ); ?></span></a>
<?php } ?>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
</div>
</section>