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

/* ######################### */
/*          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=""> 
        <div class="container_12">
            <div class="grid_2">&nbsp;</div>
            <div class="grid_8">
                <h2 style="font-family: Raleway,Oswald, sans-serif; text-align:center; 
					text-transform:uppercase; line-height:30px;">
                    What Our Clients Are Saying...
                </h2>           
                <br />    
                <ul style="list-style:none;">
                <?php
					//echo "<pre>";
					//print_r($testimonials);
				
                	foreach ($testimonials as $tes) { 
                
                ?>
                    <li class="quotes" style="width:auto; overflow:hidden"> 
                        <div class="testimonialcircle"><img src="<?= $tes['image'] ?>" 
						onerror="this.src='/static/images/users/default-avatar.jpg'"
                        class="testimonialimg" /></div>
                        <br /><br />        
                        <strong><?= $tes['title'] ?></strong>
                        <br /><br />
                        <span style="font-family:Times,serif; font-size:24px;">&ldquo;</span> 
                        <?= $tes['content'] ?><span style="font-family:Times,serif; 
                        font-size:24px;">&rdquo;</span>
                        <br /><br />
                        <span style="font-size:15px; color:#ddd;"><i><?= $tes['author'] ?></i></span>
                    </li>
                <?php
                }
                ?>          
                </ul>               
            </div>
            <div class="grid_2">&nbsp;</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>	    