<style type="text/css">
.hidden {display: none;}
#current_user_id,
#current_user_status {display:none;}
.nav-category > li .iPlugGray {
    position: absolute;
    top: 14px;
    left: 5px;
}
.nav-category > li .fa-angle-right {
    position: absolute;
    top: 12px;
    right: 5px;
	color:#ccc;
	font-size:18px;
}
.nav-category > li {
    margin: 0px 0;
    padding: 10px 22px;
    position: relative;
	font-weight:300;
	font-family: 'Open Sans';
	border-bottom:1px solid #eee;
}
.nav-category > li:hover {
	background:#fff;
}
.nav-category > li > a {
    display: inline;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
	text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    font-size: 1.077em;
	display:block;
    transition: none;
    -o-transition: none;
    -ms-transition: none;
    -moz-transition: none;
    -webkit-transition: none;
}
.top-project-info { max-height: 200px; }
.project-short.sml-thumb .top-project-info {
    padding: 0px;
}
h1 { margin-bottom:7px; }
.search-result-page .top-lbl-val {
    padding-bottom: 0px;
}
i.ajra.fa.fa-angle-right {
	position:absolute;
	line-height: auto;
    right: 5px;
	color:#ccc;
	font-size:18px;
	width:10px;
	display:inline-block;
	display:none;
}
.form-search .btn-search {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 16px;
    height: 16px;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    line-height: 0;
}
.form-search .txt-keyword { 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0);
	padding-left:4%;
	width:96%;
}
.ajaxsearch {
	background:#333;
	border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    vertical-align: middle;
}
#bottominfo { color:#aaa; position:absolute; bottom:0; background: rgba(0,0,0,.75); width:94%; padding:3%; }
#bottominfo a { color:#fff; font-family: 'Open Sans',sans-serif; font-weight:300; text-shadow:0px -1px 1px rgba(0,0,0,.9); }
#bottominfo a:hover { color:#5CAEE8 !important; }

/******************************************************************************/ 
@media screen and (max-device-width:  979px), screen and (max-width:  979px) {
	.form-search .txt-keyword { 
		padding-left:5%;
		width:95%;
	}	
}

/******************************************************************************/ 
@media screen and (max-device-width:  767px), screen and (max-width:  767px) {
	.form-search .txt-keyword { 
		padding-left:6%;
		width:94%;
	}	
}	

/******************************************************************************/ 
@media screen and (max-device-width:  480px), screen and (max-width:  480px) {
	.form-search .txt-keyword { 
		padding-left:8%;
		width:92%;
	}	
	.top-project-info { max-height: 400px; }
	#bottominfo { background: rgba(0,0,0,.75); }
	h3 { font-size:18px; }
}	
</style>

    <div class="layout-2cols">
        <div class="content grid_12" style="overflow:hidden;">
            <div class="list-project-in-category">
                <div class="list-project">

	            	<?php	
	            	foreach ($specials as $special) :
	            	?>

            		<div class="grid_3">
	                    <div class="project-short sml-thumb" style="overflow:hidden; background-size: cover; 
						background-position: center center; margin-bottom:20px; background:#222">
	                        <div class="top-project-info" style="min-height:200px; overflow:hidden; position:relative; 
							background-size: cover; background-position: center center;">
	                            <div class="content-info-short clearfix" style="overflow:hidden; 
									background-size: cover; background-position: center center;">
	                                
									<?php if ($special['link']) : ?>
										<a href="<?= $special['link'] ?>"><img src="<?= $special['image'] ?>" 
										alt="<?= $special['title'] ?>" 
										style="max-width:auto !important; background-size:cover;"></a>										
									<?php else : ?>
										<img src="<?= $special['image'] ?>" 
										alt="<?= $special['title'] ?>" 
										style="max-width:auto !important; background-size:cover;">											
									<?php endif; ?>
									                                	                            
									<!-- BOTTOM INFO WAS HERE -->
									<!-- NOTES: background-size:cover !important; object-fit:contain; -->
	                            </div>
								
	                                <div id="bottominfo" class="wrap-short-detail" style="">
	                                    <h3 class="rs acticle-title">
											<?= $special['title'] ?>
										</h3>
										<?= $special['author'] ?>  <span style="float:right;"><?= $special['custom'] ?></span>
	                                    <!--<p class="rs tiny-desc">by <a href="/profile/<?= $project['user']['user_slug'] ?>" class="fw-b fc-gray be-fc-orange"><?= $project['user']['name'] ?></a></p>-->
	                                    <!--<p class="rs title-description"><?= substr(strip_tags($project['description']),0, 100) ?>...<a href="/project/<?= $project['id'] ?>" class="be-fc-orange" style="font-weight:bold;">read more &raquo;</a></p>-->
	                                </div>								
	                        </div>
	                    </div>
	                </div>

            	<?php
            	endforeach; ?>

				</div>
			</div>	
		</div>
	</div>