<section id="focus" class="fadeInUp" data-wow-delay="0.4s"
    style="visibility: visible; animation-delay: 0.4s; animation-name: fadeInUp;">

    <div class="container">

        <div class="Section_title">

            <h3><span>Properties</span></h3>

            <?php $the_query = new WP_Query('page_id=41'); ?>

            <?php while ($the_query->have_posts()):
                $the_query->the_post(); ?>

                <p>
                    <?php echo get_field('investment_focus_top_heading'); ?>
                </p>

            <?php endwhile; ?>

        </div>

    </div>

    <div class="container">

        <div class="row listingproperties">

            <?php

            $type = 'investmentfocus';

            $args = array('post_type' => $type, 'post_status' => 'publish', 'posts_per_page' => -1, 'order' => 'ASC', 'caller_get_posts' => 1);

            $my_query = null;

            $my_query = new WP_Query($args);

            $i = 1;
            $a = 2;

            if ($my_query->have_posts()) {

                while ($my_query->have_posts()):
                    $my_query->the_post();
                    $a = $a + 4;
                    $image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'single-post-thumbnail');

                    ?>

                    <div class="col-sm-6 listingcol <?php if ($i == 1) { ?> blue <?php } elseif ($i == 2) { ?> yellow  <?php } elseif ($i == 3) { ?> yellow blueInMobile <?php } else { ?> blue yellowMobile <?php } ?>">

                        <div class="focusInner wow fadeInUp <?php if ($i == 1) { ?> blue <?php } elseif ($i == 2) { ?> yellow  <?php } elseif ($i == 3) { ?> yellow blueInMobile <?php } else { ?> blue yellowMobile <?php } ?>"
                            data-wow-delay="0.<?php echo $a; ?>s"
                            style="visibility: visible; animation-delay: 0.<?php echo $a; ?>s; animation-name: fadeInUp;">
                            <div class="properties text-center ">
                                <img src="<?php the_excerpt(); ?>">
                            </div>

                            <h2 class="fadeInUp1">
                                <?php the_title(); ?>
                            </h2>

                            <span class="fadeInUp2">
                                <?php the_content(); ?>
                            </span>
                        </div>

                    </div>

                    <?php

                    $i++;

                endwhile;

            }

            wp_reset_query(); // Restore global post data stomped by the_post().
            
            ?>

            <div class="clearfix"></div>

            

        </div>

    </div>
   
    <div class="gray_line" style="margin-top:25px;">

<?php $the_query = new WP_Query( 'page_id=41' ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post();  ?>

<h2><?php the_content(); ?></h2>

<?php endwhile;?>

</div>        
    <script>
//     jQuery(document).ready(function(){
//         jQuery(document).on("mouseenter",".focusInner",function(){
//             jQuery(this).hasClass('')
//         });
//         jQuery(document).on("mouseleave",".focusInner",function(){

// });
//     });
    </script>
    <style>
        .fadeInUp {
            animation: fadeInUp 1s ease backwards;
        }

        @keyframes fadeInUp {
            0% {
                transform: translate(0px, 100px);
                opacity: 0;
            }

            100% {
                transform: translate(0px, 0);
                opacity: 1;
            }
        }

        .fadeInUp1 {
            animation: fadeInUp1 1.5s ease backwards;
        }

        @keyframes fadeInUp1 {
            0% {
                transform: translate(0px, 100px);
                opacity: 0;
            }

            100% {
                transform: translate(0px, 0);
                opacity: 1;
            }
        }

        .fadeInUp2 {
            animation: fadeInUp2 2.5s ease backwards;
        }

        @keyframes fadeInUp2 {
            0% {
                transform: translate(0px, 200px);
                opacity: 0;
            }

            100% {
                transform: translate(0px, 0);
                opacity: 1;
            }
        }
    </style>
</section>