<style>
.testimonials { background:url(/static/images/Hero3.jpg) no-repeat center center fixed; background-size: cover; }
.testimonialcircle { height:150px; width:150px; border-radius:50%; overflow:hidden; margin: 0 auto; border:7px solid rgba(255,255,255,.1); }
.testimonialimg { height:150px; width:auto; }

ul.featmem {
	list-style-type: none;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
}

/* ######################### */
/*          iPads            */
/* ######################### */

@media (max-width: 1024px) {
    .logoimages img { height:30px; }
    .testimonials { background:url(/static/images/Hero3.jpg) no-repeat center center; background-size: cover; } 
}

/* ######################### */
/* Landscape phones and down */
/* ######################### */

@media (max-width: 480px) {
    .logoimages img { height:20px; }
    .testimonials { background:url(/static/images/Hero3.jpg) no-repeat center center; background-size: cover; } 
}

</style>

    <div class="fwc testimonials" style="background:#fff"> 
        <div class="container_12">
			<div class="grid_3" style="overflow:hidden; display:inline-block; float:left; background:#fff;">  
				<ul class="featmem" style="list-style:none; overflow:hidden; text-align:center;
				max-height:300px">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
					foreach ($recentMembers as $recentMember) {
						$first = substr($recentMember['first_name'],0,1);
						$last = substr($recentMember['last_name'],0,1);
                
                ?>
				<li class="quotes" style="width:auto; overflow:hidden; text-align:center; background:#eee;
				 height:300px; border-radius:20px">
				 		<br /> 
						<div class="testimonialcircle"><img 
						src="/static/images/users/agency/<?= $recentMember['image'] ?>" 
						class="testimonialimg" /></div>
                        <br />        
						<strong><?= $recentMember['first_name'] ?></strong>
						<br /><br /><br />
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
            <div class="clear"></div>           
        </div>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    
<script type="text/javascript">
$(document).ready(function() {
	
	// TESTIMONIALS
	var quotes = $(".quotes");
	var quoteIndex = -1;

	function showNextQuote(){
		++quoteIndex;
		quotes.eq(quoteIndex % quotes.length)
		.fadeIn(2000)
		.delay(2000)
		.fadeOut(2000, showNextQuote);
	}

	showNextQuote();

});
</script>	