<style>
	p { font-size: 15px; }
	.featureddown {
		display: none;
	}
	
	div.lst-popular-project.clearfix { overflow:hidden; }
	.greendiv { margin:0 auto 30px; }
/*	.featcontainer {
		padding:0 100px;	
	}*/
/* ######################### */
/*       Small Tablets       */
/* ######################### */

@media (max-width: 768px) {
    #featuredlistings.grid_3 { width: auto !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
		box-sizing: border-box; display: block; overflow:hidden; margin: 10px 15px 20px; padding-bottom:30px; } 
	.featureddown {
		display: block;
	}
	div.lst-popular-project.clearfix { overflow-y:scroll; }
	.greendiv { margin:0 auto; }
}

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

@media (max-width: 480px) {
    #featuredlistings..grid_3 { width: auto !important; -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    overflow:hidden; box-sizing: border-box; display: block; overflow:hidden; margin: 10px 15px 0px; 
    padding-bottom:30px; }
	.featureddown {
		display: block;
	}
}      	
</style>

<div class="wrap-title clearfix" style="background:none;">
	<h2 class="title-mark rs" style="position:relative; text-align:center; 
	font-family:Montserrat,Raleway,'Open Sans',Montserrat-Light, Oswald,sans-serif; 
	text-shadow:0px 1px 0px #fff; font-size:19px; line-height:27px; font-weight:600;">
		FΞATURED FLIPMOBS<!-- (ie. OPPORTUNITIE$)-->
		<div style="height:30px; width:35px; position:absolute; top:0; right:0px; background:none; float:right">
			<a href="/category/all"><img src="static/images/icons/right_arrow_green.png" alt=">"
			style="height:25px;" align="right" /></a>
		</div>
	</h2>
	<br />
	<div class="greendiv" style="max-width:100px; width:50%; height:5px; border-top:3px solid #14E06E;">&nbsp;</div>
</div>
<div class="clear"></div>

<div class="lst-popular-project clearfix" style="height:250px; padding-bottom:0px; background:none;">
	<?php foreach ($featured_projects as $featured_project) { ?>
	<div id="featuredlistings" class="grid_3" style="">
		
		<!--<?php echo "<pre>";  print_r($featured_project) ?>-->
		
		<div style="display:nonex; height:150px; min-width:100%; overflow:hidden; 
		object-fit:cover; background-size:cover;
			background:#eee; line-height:150px; margin-bottom:15px; border-radius: 6px;
			-moz-border-radius: 6px; -webkit-border-radius: 6px;">
			<a class="be-fc-black" style="color:#000; font-family:Montserrat,Raleway,'Open Sans',Montserrat-Light, Oswald,sans-serif;" href="/listing/<?= $featured_project['id'] ?>"><img 
			src="<?= $featured_project['main_img'] ?>" alt="img" 
			onerror="this.src='/static/system/default_listing_banner.png'" 
			style="object-fit:cover; min-width:100% !important; width:auto !important; 
			background-size:cover; max-height:200px; background-size:cover;" /></a>
		</div>
		
		<h3 class="rs acticle-title">
			<a class="be-fc-black" style="color:#000; font-family:Montserrat,Raleway,'Open Sans',Montserrat-Light, Oswald,sans-serif;" href="/listing/<?= $featured_project['id'] ?>"><?= $featured_project['title'] ?></a>
		</h3>
		
		<!--<br />
		<p class="rs title-description" style="font-family:Montserrat,Raleway,'Open Sans',Montserrat-Light, Oswald,sans-serif;">
			<?= substr(strip_tags($featured_project['description']),0, 100) ?>... <a href="/project/<?= $featured_project['id'] ?>" 
				class="be-fc-orange" 
				style="font-weight:bold; 
				font-family:Montserrat,Raleway,'Open Sans',Montserrat-Light, Oswald,sans-serif;">read more &raquo;</a>
		</p>-->
	</div><!--end: GRID_2 -->		
	<?php } ?>
</div>