<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); object-fit:cover; }
.testimonialimg { height:150px; width:auto; object-fit:cover;  }

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;
}

.quotes a, .quotes a:link, .quotes a:active, .quotes a:visited, a.hashtags {
	color: #00a3ec !important;
}

/*.quotes {
	z-index: 9999999999999999999 !important; 
}*/

/* ######################### */
/*          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; padding-top:0px;
    font-family:Montserrat,Raleway,'Open Sans',Helvetica, Verdana, sans-serif;"> 
        <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:360px; font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana, sans-serif;
					margin-bottom:50px;">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
					foreach ($recentMembers1 as $recentMember1) {
						$first = substr($recentMember1['first_name'],0,1);
						$last = substr($recentMember1['last_name'],0,1);
                
                ?> 
				<li class="quotes" style="width:auto; overflow:hidden; text-align:center; background:none;
					height:350px; -webkit-border-radius:8px; -moz-border-radius:8px; border:2px solid #eee;
					border-radius:8px; color:#000; text-shadow:0px 1px 0px #fff; margin-bottom:25px">
				 		<br /> 
						 <a href="/profile/<?= $recentMember1['user_slug'] ?>" style="display:block;"
							 title="<?= $recentMember1['name'] ?>"><div class="testimonialcircle"><img 
							src="/static/images/users/agency/<?= $recentMember1['image'] ?>" 
						onerror="this.src='/static/images/users/default-avatar.jpg'"
						class="testimonialimg" /></div></a>
                        <br />        
						<a href="/profile/<?= $recentMember1['user_slug'] ?>" style="color:#00a3ec; display:block;"
						title="<?= $recentMember1['name'] ?>">
						<strong><?= $recentMember1['first_name'] ?> <?= $recentMember1['last_name'] ?></strong></a>
						
						<div style="font-size:15px; margin-top:7px;">
							<span style="text-transform: uppercase; 
							font-weight:500;"><?= $recentMember1['occupation_title'] ?></span><br />
							<?= $recentMember1['occupation_at'] ?>
						</div>
					
						<div style="margin-top:10px; height:45px; padding:5px 15px 0; 
						overflow:hidden; font-size:14px">
							<?php
							$skills = explode (",", $recentMember1['temperaments']);
							$count = 0;
							if (!empty($recentMember1['temperaments'])) {
								echo "Interested in: ";
							}
							foreach ($skills as $skill) {
								$count++;
								if ($count !=1) {
									echo " &bull; ";
								}
								if (!empty($skill)) {
									echo "<a class='hashtags' href='/members?search=" . trim($skill) . "' style='background:none;'>" . trim($skill) . "</a>";
								}
							}
							?>
						</div>
						<br /><br /><br />
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
			<!-- END OF BLOCK #1 -->
			
            <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:360px; font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana, sans-serif;">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
					foreach ($recentMembers2 as $recentMember2) {
						$first = substr($recentMember2['first_name'],0,1);
						$last = substr($recentMember2['last_name'],0,1);
                
                ?>
				<li class="quotes2" style="width:auto; overflow:hidden; text-align:center; background:none;
					height:350px; -webkit-border-radius:8px; -moz-border-radius:8px; border:2px solid #eee;
					border-radius:8px; color:#000; text-shadow:0px 1px 0px #fff; margin-bottom:25px">
				 		<br /> 
						 <a href="/profile/<?= $recentMember2['user_slug'] ?>" style="display:block;"
							 title="<?= $recentMember2['name'] ?>"><div class="testimonialcircle"><img 
							src="/static/images/users/agency/<?= $recentMember2['image'] ?>" 
						onerror="this.src='/static/images/users/default-avatar.jpg'"
						class="testimonialimg" /></div></a>
                        <br />        
						<a href="/profile/<?= $recentMember2['user_slug'] ?>" style="color:#00a3ec; display:block;"
						title="<?= $recentMember2['name'] ?>">
						<strong><?= $recentMember2['first_name'] ?> <?= $recentMember2['last_name'] ?></strong></a>
						
						<div style="font-size:15px; margin-top:7px;">
							<div style="text-transform: uppercase; font-weight:500; height:20px; overflow:hidden;">
								<?= $recentMember2['occupation_title'] ?>
							</div>
							<?= $recentMember2['occupation_at'] ?>
						</div>
					
						<div style="margin-top:10px; height:45px; padding:5px 15px 0; 
						overflow:hidden; font-size:14px">
							<?php
							$skills = explode (",", $recentMember2['temperaments']);
							$count = 0;
							if (!empty($recentMember2['temperaments'])) {
								echo "Interested in: ";
							}
							foreach ($skills as $skill) {
								$count++;
								if ($count !=1) {
									echo " &bull; ";
								}
								if (!empty($skill)) {
									echo "<a class='hashtags' href='/members?search=" . trim($skill) . "' style='background:none;'>" . trim($skill) . "</a>";
								}
							}
							?>
						</div>
						<br /><br /><br />
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
			<!-- END OF BLOCK #2 -->
			
			<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:360px; font-family:Montserrat,Raleway,'Open Sans',Helvetica,Verdana, sans-serif;">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
					foreach ($recentMembers3 as $recentMember3) {
						$first = substr($recentMember3['first_name'],0,1);
						$last = substr($recentMember3['last_name'],0,1);
                
                ?>
				<li class="quotes3" style="width:auto; overflow:hidden; text-align:center; background:none;
					height:350px; -webkit-border-radius:8px; -moz-border-radius:8px; border:2px solid #eee;
					border-radius:8px; color:#000; text-shadow:0px 1px 0px #fff; margin-bottom:25px">
				 		<br /> 
						 <a href="/profile/<?= $recentMember3['user_slug'] ?>" style="display:block;"
							 title="<?= $recentMember3['name'] ?>"><div class="testimonialcircle"><img 
							src="/static/images/users/agency/<?= $recentMember3['image'] ?>" 
						onerror="this.src='/static/images/users/default-avatar.jpg'"
						class="testimonialimg" /></div></a>
                        <br />        
						<a href="/profile/<?= $recentMember3['user_slug'] ?>" style="color:#00a3ec; display:block;"
							title="<?= $recentMember3['name'] ?>">
						<strong><?= $recentMember3['first_name'] ?> <?= $recentMember3['last_name'] ?></strong></a>
						
						<div style="font-size:15px; margin-top:7px;">
							<span style="text-transform: uppercase;
							font-weight:500;"><?= $recentMember3['occupation_title'] ?></span><br />
							<?= $recentMember3['occupation_at'] ?>
						</div>

						<div style="margin-top:10px; height:45px; padding:5px 15px 0;
						overflow:hidden; font-size:14px">
							<?php
								$skills = explode (",", $recentMember3['temperaments']);
								$count = 0;
								if (!empty($recentMember3['temperaments'])) {
									echo "Interested in: ";
								}
								foreach ($skills as $skill) {
									$count++;
									if ($count !=1) {
										echo " &bull; ";
									}
									if (!empty($skill)) {
										echo "<a class='hashtags' href='/members?search=" . trim($skill) . "' style='background:none;'>" . trim($skill) . "</a>";
									}
								}
							?>
						</div>
						<br /><br /><br />
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
			<!-- END OF BLOCK #3 -->
			
			<div class="grid_3" style="overflow:hidden; display:inline-block; float:left; background:#fff;">  
				<ul class="featmem" style="width:auto; overflow:hidden; text-align:center;
					height:360px; -webkit-border-radius:8px; -moz-border-radius:8px; 
					border-radius:8px; color:#000; text-shadow:0px 1px 0px #fff; margin-bottom:25px">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
					foreach ($recentMembers4 as $recentMember4) {
						$first = substr($recentMember4['first_name'],0,1);
						$last = substr($recentMember4['last_name'],0,1);
                
                ?>
				<li class="quotes4" style="width:auto; overflow:hidden; text-align:center; background:none;
				height:350px; -webkit-border-radius:8px; -moz-border-radius:8px; border:2px solid #eee;
				border-radius:8px; color:#000; text-shadow:0px 1px 0px #fff; margin-bottom:25px">
				 		<br /> 
						 <a href="/profile/<?= $recentMember4['user_slug'] ?>" style="display:block;"
						title="<?= $recentMember4['name'] ?>"><div class="testimonialcircle"><img 
							src="/static/images/users/agency/<?= $recentMember4['image'] ?>" 
						onerror="this.src='/static/images/users/default-avatar.jpg'"
						class="testimonialimg" /></div></a>
                        <br />        
						<a href="/profile/<?= $recentMember4['user_slug'] ?>" style="color:#00a3ec; display:block;"
							title="<?= $recentMember4['name'] ?>">
						<strong><?= $recentMember4['first_name'] ?> <?= $recentMember4['last_name'] ?></strong></a>
						
						<div style="font-size:15px; margin-top:7px;">
							<span style="text-transform: uppercase;
							font-weight:500;"><?= $recentMember4['occupation_title'] ?></span><br />
							<?= $recentMember4['occupation_at'] ?>
						</div>

						<div style="margin-top:10px; height:45px; padding:5px 15px 0;
						overflow:hidden; font-size:14px">
							<?php
							$skills = explode (",", $recentMember4['temperaments']);
								$count = 0;
								if (!empty($recentMember4['temperaments'])) {
									echo "Interested in: ";
								}
								foreach ($skills as $skill) {
									$count++;
									if ($count !=1) {
										echo " &bull; ";
									}
									if (!empty($skill)) {
										echo "<a class='hashtags' href='/members?search=" . trim($skill) . "' style='background:none;'>" . trim($skill) . "</a>";
									}
								}
							?>
						</div>
						<br /><br /><br />
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
			<!-- END OF BLOCK #4 -->
			
			<!-- END OF ALL DIV 3S -->
            <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();
	
	// BLOCK #2
	var quotes2 = $(".quotes2");
	var quoteIndex2 = -1;

	function showNextQuote2(){
		++quoteIndex2;
		quotes2.eq(quoteIndex2 % quotes2.length)
		.fadeIn(2500)
		.delay(2500)
		.fadeOut(2500, showNextQuote2);
	}

	showNextQuote2();	
	
	// BLOCK #3
	var quotes3 = $(".quotes3");
	var quoteIndex3 = -1;

	function showNextQuote3(){
		++quoteIndex3;
		quotes3.eq(quoteIndex3 % quotes3.length)
		.fadeIn(3000)
		.delay(3000)
		.fadeOut(3000, showNextQuote3);
	}

	showNextQuote3();	
	
	// BLOCK #4
	var quotes4 = $(".quotes4");
	var quoteIndex4 = -1;

	function showNextQuote4(){
		++quoteIndex4;
		quotes4.eq(quoteIndex4 % quotes4.length)
		.fadeIn(3500)
		.delay(3500)
		.fadeOut(3500, showNextQuote4);
	}

	showNextQuote4();		

});
</script>	