<?php include 'views/_header.tpl.php'; ?>
<!-- THIS IS THE MAIN PAGE FOR THE FEATURE -->
<style type="text/css">
    .spacer { padding-top:35px; }
    .layout-2cols { padding-top:17px; }
    .backbutton { display:none; }
    .sml-thumb .content-info-short .thumb-img {
        padding: 0px;
    }
    
    a.thumb-img { }
    .btn-red,.btn-blue {
        font-family:'Open Sans',sans-serif;
        font-weight:300; 
        font-size:15px;
        letter-spacing:1.1px;
        -webkit-border-radius:50px;
        -moz-border-radius:50px; 
        border-radius:50px;         
    }
    input.btn-flat {
		padding:10px;
		font-weight: 300;
		font-size:15px;
		border:1px solid #326bb9;
		color: #FFF;
		background: #4392ec;
		background: -moz-linear-gradient(top, #4392ec 0%, #377ae8 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4392ec), color-stop(100%,#377ae8));
		background: -webkit-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: -o-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: -ms-linear-gradient(top, #4392ec 0%,#377ae8 100%);
		background: linear-gradient(top, #4392ec 0%,#377ae8 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4392ec', endColorstr='#377ae8',GradientType=0 );
		-moz-transition: all 0.3s ease 0s;
		-webkit-transition: all 0.3s ease 0s;
		-o-transition: all 0.3s ease 0s;
		-ms-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s; 
		-webkit-border-radius:50px;
		-moz-border-radius:50px;
		border-radius:50px;   
		box-shadow: 0 3px 10px rgb(0 0 0 / 20%);
    }
	input.btn-flat:hover {
		border:1px solid #326bb9;
		color: #FFF;
		background: #449afc;
		background: -moz-linear-gradient(top, #377ae8 0%, #4392ec 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#377ae8), color-stop(100%,#4392ec));
		background: -webkit-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: -o-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: -ms-linear-gradient(top, #377ae8 0%,#4392ec 100%);
		background: linear-gradient(top, #377ae8 0%,#4392ec 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4392ec', endColorstr='#4392ec',GradientType=0 );
	}
	.btn-flat a, .btn-rounded a { 
        -webkit-border-radius:50px;
        -moz-border-radius:50px; 
        border-radius:50px;
    	background:#999; 
    	text-align:center; 
    	display:block; 
    	color:#ddd; 
		overflow:hidden;
    	padding:15px 0; 
    	-moz-transition: all 0.3s ease 0s;
    	-webkit-transition: all 0.3s ease 0s;
    	-o-transition: all 0.3s ease 0s;
    	-ms-transition: all 0.3s ease 0s;
    	transition: all 0.3s ease 0s; 
    	text-transform:uppercase;
    	letter-spacing:2px;
    	font-size:17px;
    	font-weight:300;
    }
	.btn-flat a:hover, .btn-rounded a:hover { 
		color:#fff;
    	background:#537C57; -moz-transition: all 0.3s ease 0s;
    	-webkit-transition: all 0.3s ease 0s;
    	-o-transition: all 0.3s ease 0s;
    	-ms-transition: all 0.3s ease 0s;
    	transition: all 0.3s ease 0s; 
    }
	.progressbar {
		-webkit-border-radius: 50px;
		-moz-border-radius: 50px;
		border-radius: 50px;
		background: #ddd;
		text-align: center;
		display: block;
		color: #ddd;
		height:10px;
		overflow: hidden;
		padding: 0;
		-moz-transition: all 0.3s ease 0s;
		-webkit-transition: all 0.3s ease 0s;
		-o-transition: all 0.3s ease 0s;
		-ms-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;
		text-transform: uppercase;
		letter-spacing: 2px;
		font-size: 8px;
		font-weight: 300;
	}
    .imghld { height:175px; width:175px; overflow:hidden; }
    .project-short .group-fee .seps {
        float: left;
        border-left: 1px solid #ddd;
        height: 41px;
    	display:inline-block;
    }
    .list-project-in-category .list-project .project-short {
        margin-bottom: 18px;
    }
    .search-result-page .top-lbl-val {
        padding-bottom: 0px;
    }
    .project-short.sml-thumb .group-fee .fee-item { 
    	width:33%; 
    	padding:0px; 
    	margin:0px; 
    	text-align:center;
    	font-family: 'Open Sans';
    	font-weight:300;	
    }
    span.val {
    	font-family: 'Open Sans';
    	font-weight:300 !important;
    }
    .project-short.sml-thumb .group-fee .fee-item {
        border-top: 0px dashed #d4d4d4;
    }
    .sml-thumb .content-info-short .wrap-short-detail { padding-top:5px; }
    .top-project-info { }
    .project-short.sml-thumb .top-project-info {
        padding: 0px;
    	background:none;
    	min-height:200px;
    }
    h3.article-title { text-align:center; padding-bottom:5px; 	font-family: 'Open Sans';
    	font-weight:600;	 }
    a.be-fc-orange { color:#444; font-weight:300; }
    .hidden {display: none;}
    .form-search { display:nonex; }
    .searchholder { max-width:400px; }
	.form-search .txt-keyword {
		margin: 0 auto;
		font-family: 'Open Sans', sans-serif;
		font-weight: 300;
		font-size:14px;
		padding: 12px 32px 14px 43px;
		width: 100% !important;
		max-width:900px !important;
		display: block;
		outline: none;
		color:#fff !important;
		background-color: #fff;
		border: 1px solid #d9d9d9;
		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;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	.form-search .btn-search {
		top: 15px;
	}
	.form-search .btn-reset-keyword {
		top: 18px;
	}
    #current_user_id,
    #current_user_status {display:none; }
    .recent-members .member-thumb img {
        text-align:center;
        display:inline-block;
        float:left;
        width: 24%;
        height: auto;
        margin-bottom:1px;
        margin-right:1px;
        object-fit: cover;
        object-position: center;
        box-sizing:border-box; 
        -moz-box-sizing:border-box; 
        -webkit-box-sizing:border-box;
    }
    .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;
    }
    
    h1 { margin-bottom:7px; }
    h3 {}
    
    i.ajra.fa.fa-angle-right {
    	position:absolute;
    	line-height:40px;
        right: 5px;
    	color:#ccc;
    	font-size:18px;
    	width:10px;
    	display:inline-block;
    }

	#footer {
		/*border-top: 1px solid #ccc !important;*/
		padding: 0px 0 0 0;
	}
    .main-footer { display:none; }
    
	.quickpostform ::-webkit-input-placeholder {
		/* Edge */
		color: #bbb;
	}

	.quickpostform :-ms-input-placeholder {
		/* Internet Explorer 10-11 */
		color: #bbb;
	}

	.quickpostform ::placeholder {
		color: #bbb;
	}
	
	/* ########################################### */
	/* ############   SCROLLING MENU  ############ */
	/* ########################################### */

	div.scrollmenu {
		background-color: none;
		overflow: hidden; /* set to auto for mobile, hidden for desktop */
		white-space: nowrap; 
		padding-left:20px;
		padding-bottom:10px;
	}

	div.scrollmenu a {
		font-family:Montserrat,'Open Sans', Ralway, Helvetica, Verdana, sans-serif;
		font-weight:500;
		display: inline-block;
		color: #000;
		text-shadow:0px 1px 0px #fff;
		text-align: center;
		padding: 10px 0px;
		text-decoration: none;
		border-bottom:2px solid transparent;
	}
	div.scrollmenu a.selected {
		color:#00A1FE;
		text-shadow:0px 1px 0px #fff;
		border-bottom:2px solid #00A1FE;
	}

	div.scrollmenu a:hover {
		/*background-color: #eee;*/
		color:#00A1FE;
		text-shadow:0px 1px 0px #fff;
		border-bottom:2px solid #00A1FE;
	}
	
	::-webkit-scrollbar-thumb {
		width:50px !important;
	}
	
	/*******************************/
	/***********  LOADER  **********/
	/*******************************/
	
	.loader .middle {
		margin-top: 25%;
	}
	.loader {
		position: absolute;
		z-index: 9999999999999999999999999 !important;
		height: 100%;
		width: 100%;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #000000;
	}
	.loader p {
		color: #fff;
		letter-spacing: 4px;
		font-weight: 300;
		font-size: 15px;
	}
	.loadercircle {
		line-height: 1.5;
		display: inline-block;
		vertical-align: middle;
		border: 2px solid #fff; /* Light grey */
		border-right-color: transparent;
		border-radius: 50%;
		width: 70px;
		height: 70px;
		animation: spin 2s linear infinite;
		margin: 0 auto;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}

	.animated-characters {
		background-image: linear-gradient(
		-225deg,
		#cace00 0%,
		#ff7a00 29%,
		#ff166c 67%,
		#fff800 100%
		);
		background-size: auto auto;
		background-clip: border-box;
		background-size: 200% auto;
		color: #fff;
		background-clip: text;
		text-fill-color: transparent;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: textclip 3s linear infinite;
		display: inline-block;
		font-weight:600;
		font-size: 26px;
	}
	
	@keyframes textclip {
		to {
			background-position: 200% center;
		}
	}

/* ########################################################################## */
/* #####################         MOBILE STYLING         ##################### */
/* ########################################################################## */

/******************************************************************************/ 

@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
	/*.grid_12 { background:red; }*/
	
	div#makefull.grid_1 { width:9%; float:left; /*background:purple;*/ }
	div#makefull.grid_2 { width:20%; float:left; /*background:green;*/ }
	div#makefull.grid_9 { width:72%; float:left; /*background:orange;*/ }
	
    /* MOBILE STYLES FOR MOB LAYOUT */

}

/******************************************************************************/ 

@media screen and (max-device-width:  979px), screen and (max-width:  979px) {
/*	.imghld { height:auto; overflow:hidden; }
	.list-project-in-category .list-project > .grid_3 {
		width: 48%;
	}	
	.project-short.sml-thumb .group-fee .fee-item { 
		float:left; 
		width:33%; 
		padding:0px; 
		margin:0px; 
		text-align:center;
		font-family: 'Open Sans';
		font-weight:300;
		box-sizing:border-box;
		-moz-box-sizing:border-box;
		-webkit-box-sizing:border-box;	
	}	*/
    /* MOBILE STYLES FOR MOB LAYOUT */
/*     #makefull { display:block; width:100%; margin-bottom:5px; }
    .imghld { height:auto; max-height:300px; width:100%; overflow:hidden; }
    .grid_2 { margin-bottom:0px; padding-bottom:0px; }
    .pledgecontent { text-align:center; }	*/
}

/******************************************************************************/ 
/******************************************************************************/ 

@media screen and (max-device-width:  767px), screen and (max-width:  767px) {
	/*.grid_12 { background:yellow; }*/
    .sml-thumb .content-info-short .wrap-short-detail { padding-bottom:11px; }
    .project-short.sml-thumb .group-fee .fee-item { }
    .sml-thumb .content-info-short .wrap-short-detail { }   
    .list-project-in-category .list-project > .grid_3 {
        width: auto;
        display:block;
    }
    .imghld { height:auto; overflow:hidden; }
    .spacer { padding-top:65px; }
    h3.common-title { font-size:24px; text-align:center; margin-bottom:5px; }
    /* MOBILE STYLES FOR MOBS LAYOUT */
     #makefull { display:block; width:auto; margin-bottom:5px; }
    .imghld { height:auto; max-height:300px; width:100%; overflow:hidden; }
    .grid_2 { margin-bottom:0px; padding-bottom:0px; }
    .pledgecontent { text-align:center; }  
}	

/******************************************************************************/ 
/******************************************************************************/ 

@media (max-width: 587px) {
	/*.grid_12 { background:blue; }*/
	.backbutton { display:inline; }
	.spacer { padding-top:53px; }
	div#makefull.grid_1 { width:20%; float:left; /*background:purple;*/ }
	div#makefull.grid_2 { width:80%; float:left; /*background:green;*/ }
	div#makefull.grid_9 { width:100%; float:left; /*background:orange;*/ }
	.searchholder { max-width:600px; width:100%; }
	div.scrollmenu { overflow: auto; padding-left:10px; }
	.sml-thumb .content-info-short .wrap-short-detail { padding-bottom:11px; }
	.project-short.sml-thumb .group-fee .fee-item { }
	.sml-thumb .content-info-short .wrap-short-detail { }	
	.list-project-in-category .list-project > .grid_3 {
		width: auto;
		display:block;
	}
	.imghld { height:auto; overflow:hidden; }
	h3.common-title { font-size:24px; text-align:center; margin-bottom:5px; }
    /* MOBILE STYLES FOR FEATURES */
    div#makefull.grid_1 { background:none; margin-left:15px; }
    div#makefull.grid_2 { width:100%; }
     #makefull { display:block; width:auto; margin-bottom:5px; }
    .imghld { height:auto; max-height:300px; width:100%; overflow:hidden; }
    .grid_2 { margin-bottom:0px; padding-bottom:0px; }
    .pledgecontent { text-align:center; }
    .nav-category > li {
        height: 30px;
    }
    /* #############  NAV ############ */
    .nav-category > li .iPlugGray {
        position: absolute;
        top: 24px;
        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: 20px 22px 10px;
        position: relative;
        font-weight:300;
        font-family: 'Open Sans';
        border-bottom:1px solid #eee; 
    }   
   
    .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: 17px;	
     }
	 div.sidebar.grid_2 {
		 padding: 0 15px;
	 }
	 .layout-2cols {
		 padding-top: 0px;
	 }
}

/******************************************************************************/ 
/******************************************************************************/ 

@media (max-width: 480px) {
	.spacer { padding-top:53px; }
	.loader .middle {
		margin-top: 75%;
	}
    .sml-thumb .content-info-short .wrap-short-detail { padding-bottom:11px; }
    .project-short.sml-thumb .group-fee .fee-item { }
    .sml-thumb .content-info-short .wrap-short-detail { }   
    .list-project-in-category .list-project > .grid_3 {
        width: auto;
        display:block;
    }
    .imghld { height:auto; overflow:hidden; }
    h3.common-title { font-size:24px; text-align:center; margin-bottom:5px; }
    /* MOBILE STYLES FOR MOBS LAYOUT */
     #makefull { display:block; width:auto; margin-bottom:5px; }
    .imghld { height:auto; max-height:300px; width:100%; overflow:hidden; }
    .grid_2 { margin-bottom:0px; padding-bottom:0px; }
    .pledgecontent { text-align:center; }    
}

@media (max-width: 320px) {
	.loader .middle { margin-top: 80%; }   
}
</style>

<div class="loader" data-skin="dark" data-background-color="" data-text-color="" style="display: nonexxx; background:#000; text-align:center;">
	<div class="middle">
		<p>LOADING</p>
		<!--<span class="circle"></span>-->
		<div class="loadercircle"></div>
	</div>
</div>

<div class="layout-2cols" id="featurelist" style="width:100%; background:none;">
	<!--<div class="container_12" style="padding-top:20px;"> overflow-x: scroll; overflow-y:hidden; -->
	<!-- 999999999999999 -->
	

	<div style="width:100%; background:#fff; position:fixed; padding-top:7px">
		<h1 style="margin-top:5px; margin-left:10px; padding-bottom:5px;">
			<span class="animated-characters" title="Browse...">My Listings</span>
			<a href="/profile/mylistings" style="color:#ccc; font-size:20px;">
				<i class="fa fa-refresh"></i></a>
			
			<div class="count-result" style="display:inline-block; font-size:17px; width:auto;
				padding-bottom:0px; float:right; margin-top:3px; margin-right:10px">

				<span class="fw-b fc-black"><?= count($projects) ?></span>
				<span style="color:#999;">total listings</span>

			</div>
		</h1>
	</div>
	<div class="clear"></div>
    
	<div class="content grid_12" style="margin-top:15px;">     
        <div class="search-result-page">
            <div class="top-lbl-val">
            
				<div style="display:none; 
				padding:0px 10px 0px; font-weight:400; -webkit-font-smoothing: antialiased; 
	            -webkit-font-smoothing: antialiased; text-align: left; color:#222;
	            text-shadow:0px 1px 0px rgba(255,255,255,.4); font-size:28px; line-height:37px;">
	            	
					<h1 style="display:none; font-size:20px; line-height:28px; font-weight:600;
						font-family:Montserrat,'Open Sans', Ralway, Helvetica, Verdana, sans-serif;">
							<!--DΞAL GLITCHES--> <!--FΞature Requests Ξngine-->
	                </h1>
	                	
					<div style="display:nonex; font-weight:400; font-size:22px; line-height:26px; 
						margin-top:5px;">
				            <?php if ($_SESSION['loggedin']) : ?>
								Create a new flipmob... <!--<a href="/addfast" title="Create a new flip mob" 
								style="font-weight:600;">Create mob</a>-->
				            <?php else : ?>
								Create a new flipmob... <!--<a href="#login" title="Login to create a new flip mob" 
									class="loginpop loginbtn" style="font-weight:600;">Create mob</a>-->
				            <?php endif; ?>	                	
	                	</div>   
	                	
					<div style="color:#aaa; font-size:14px; margin-top:-5px">
                		note: you can sign up, post <i>and</i> comment anonymously.
                	</div>   
	                	
					<div class="quickpostform" style="font-size:17px; margin-top:5px; 
						-webkit-box-sizing: border-box; position:relative; -moz-box-sizing: border-box; 
						box-sizing: border-box; width:100%;">
							
						<form method="post" enctype="multipart/form-data" data-ajax="false" 
							action="/project/addfast" 
							style="-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
							box-sizing: border-box; width:100%;">

							<div class="grid_3 blockit" style="margin-left:0;
							 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
							 box-sizing: border-box;">
								<input id="quicktitle" class="txt" type="text" name="title" 
								placeholder="FlipMob Objective/Opportunity/Goal/Title" 
								style="background:#e7e7e7; -webkit-border-radius:8px; -moz-border-radius:8px; 
								border-radius:8px; padding:10px; margin:5px; font-weight:300; width:97%; 
								-webkit-box-sizing: border-box;
								-moz-box-sizing: border-box; box-sizing: border-box; border:1px solid #fff;">
							</div>
							<div class="grid_3 blockit" style="margin-left:0;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
							box-sizing: border-box;">
								<select id="quickcat" class="txt" type="text" name="category_id" 
									style="padding:10px; background:#e7e7e7; -webkit-border-radius:8px; 
									-moz-border-radius:8px; border-radius:8px; 
									margin:5px; font-weight:300; width:97%; -webkit-box-sizing: border-box;
									-moz-box-sizing: border-box; box-sizing: border-box; 
									border:1px solid #fff; height:45px;">
									<option value="">Select Category</option>
									<?php
									foreach ($categories as $index => $category)
										echo "<option value='{$category['id']}'>{$category['title']}</option>";
									?>
								</select>
							</div>
							<div class="grid_4 blockit" style="margin-left:0; -webkit-box-sizing: border-box;
							 -moz-box-sizing: border-box; box-sizing:border-box;">
								<textarea id="descrip" class="ckeditor txt" name="description" rows="5"
									style="background:#e7e7e7; -webkit-border-radius:8px; 
									-moz-border-radius:8px; border-radius:8px; min-height:60px; 
									max-height:60px; padding:10px; margin:5px; font-weight:300;
								width:97%; -webkit-box-sizing: border-box; border:1px solid #fff;
								-moz-box-sizing: border-box; box-sizing: border-box;"
								placeholder="Quick description..."></textarea>
							</div>
							<div class="grid_2 blockit" 
								style="margin-left:0px; -webkit-box-sizing: border-box; 
								-moz-box-sizing: border-box;box-sizing: border-box; padding-bottom:20px;">
						
								<?php if ($_SESSION['loggedin']) { ?>
									<input id="quickpost" class="btn-flat" type="submit" value="Create a Mob"
									style="margin:3px 5px 5px; width:200px;" />
										<!--<a href="javascript:;" id="reserveformtop" class="btn-o"
											style="width:155px; text-align:center; margin-top:20px;">Reserve AppWrapr</a>-->										<?php } else { ?>
									<input id="loginfirst" class="btn-flat" type="button" value="Create a Mob"
									style="margin:3px 5px 5px; width:200px;" />
								<?php } ?>
								
							</div>
	
						</form>
					</div>
					<div class="clear"></div>            	
	            </div>
				<div class="clear"></div>
					<!--&nbsp;<a href="/crowd-funded-apps" style="margin-top:10px; margin-bottom:-10px; font-size:22px; font-weight:400; color:#bbb;"><i 
                    class="fa fa-question-circle" aria-hidden="true" style="margin-top:10px; margin-bottom:-10px;"></i></a>-->
				<!-- ################################################################### -->
				<!-- ####################      CATEGORY RESULTS     #################### -->
				<!-- ################################################################### -->

				<!--<?php print_r($selected_category);
				echo "Cat Name: " . $cat_name; ?>-->
                
				<!-- ################################################################### -->
				<!-- ####################    LISTINGS START HERE   #################### -->
				<!-- ################################################################### -->
                
				<div class="list-project-in-category" style="margin-top:50px; background:none; min-height:600px;">
                    <div class="list-project">

	            	<?php
	            	foreach ($projects as $project) :
						if (!['main_img'] && isset($project['images'][0])) {
							$project['main_img'] = $project['images'][0]['file'];
						}
						//echo "<pre>";
						//print_r($project);
	            	?>
	            	<div style="width:100%; background:none;"> 	            	
						<div id="makefull" class="grid_2" style="min-height:174px; overflow:hiddenx;
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box;
							box-sizing: border-box;">
							<div class="imghld" style="display:inline-block; text-align:center; 
							object-fit:cover; overflow:hidden; border-radius:12px; -moz-border-radius: 12px; 
							-webkit-border-radius: 12px;">
                                <a href="/listing/<?= $project['id'] ?>" class="thumb-imgxx" 
                                    style="min-height:100% !important; width:auto !important;">
                                <img src="/<?= $project['main_img'] ?>" alt="<?= $project['title'] ?>" 
								onerror="this.src='/static/client/default_kode.png'"
								style="min-height:100% !important; width:auto !important; object-fit:cover; 
								border-radius:12px; -moz-border-radius: 12px; -webkit-border-radius: 12px;">
                                </a>
                            </div>
                        </div>  
                        <div id="makefull" class="grid_10" style="background:#fff; min-height:175px; 
							overflow:hidden; margin-bottom:25px; 
							-webkit-box-sizing: border-box; -moz-box-sizing: border-box; 
							box-sizing: border-box;">	
                            <div style="padding:15px 20px; 20px; font-size:17px; line-height:25px; 
                            font-weight:300;">
                                <h2 class="rs article-title" style="text-align:left; font-size:32px; 
                                line-height:40px; padding-top:0px; margin-bottom:0px; padding-bottom:0px">
                                    <a class="be-fc-orange" 
                                    href="/listing/<?= $project['id'] ?>"><?= $project['title'] ?></a>
                                </h2>
                                <p style="margin-top:10px; line-height:27px;">
                                	<?= substr($project['description'],0,200).'...'; ?> 
                                    <a href="/listing/<?= $project['id'] ?>" style="color:#0477bf; 
                                    font-weight:600">read more &raquo;</a>
									<span style="float:right;">posted by <a 
									href="/profile/<?= $project['user']['user_slug'] ?>"><img 
									src="/static/images/users/agency/<?= $project['user']['image'] ?>"
									style="height:25px; border-radius:50%; -webkit-border-radius:50%;
									-moz-border-radius:50%;" /></a></span>
                                </p>
                                
								<div class="pledgecontent" style="margin-top:10px; font-size:20px; 
								font-size:17px;">
                                    <!--<span class="val" style="color:#00C617; 
                                    font-weight:bold !important;">$<?= number_format($project['raised']); ?></span>
									of --> 
									<?php
									if ($project['type_id']==2) {
										$mobType = "FOR PROFIT";
									} elseif($project['type_id']==3){
										$mobType = "FOR SAVINGS";
									} elseif($project['type_id']==4){
										$mobType = "BUYING";
									} elseif($project['type_id']==5){
										$mobType = "SELLING";
									} elseif($project['type_id']==6){
										$mobType = "GOAL BASED";
									} else {
										$mobType = "OTHER";
									} ?>
									<div style="background:#F11303; color:#fff; padding:3px 10px;
										text-align:center; font-size:12px; width:75px; 
										display:inline-block; margin-right:5px; border-radius: 4px !important;
										-moz-border-radius: 4px !important; -webkit-border-radius: 4px !important;">
										<?= $mobType ?>
									</div>
									<span class="val" style="color:#00C617; 
                                    font-weight:bold !important;">$<?= number_format($project['budget']); ?></span> 
									<?php if ($project['type_id'] ==5) { ?>
										asking price
									<?php } else { ?>
										needed
									<?php } ?>	
									 | 
									<?php if ($project['type_id'] ==5) { ?>
										<span class="val" style="color:#00C617;
										font-weight:bold !important;"><?= count($project['proposals']); ?></span> 
										<?php
										if (count($project['proposals']) > 1) { ?>offers<?php } else { ?>offer<?php } ?>
									<?php } else { ?>
									<span class="val" style="color:#00C617;
										font-weight:bold !important;">$<?= number_format($project['crowdfund']); ?></span>
										pledged from
										<strong><?= number_format($project['chipins']); ?></strong> mobbers so far
									<?php } ?>
									
									<?php
									if ($project['crowdfund'] > 0 && $project['budget'] >= 0) {
										$progress = ($project['crowdfund']/$project['budget']) * 100;
									} else {
										$progress = 0;
									}
									?>
									<!--Progress: <?= $progress ?>%-->
									<!--<span class="val" style="color:#00C617;
									font-weight:bold !important;">Verified</span> by 
									<b><?= $project['chipinstotal']; ?></b> members-->
									<!--<span style="color:#00C617; font-weight:bold;">~$<?= number_format($project['crowdfunding']); ?></span> CFP from <b><?= $project['chipinstotal']; ?></b> members-->
                                    
									<!--<div style="padding-top:4px; margin-top:4px; border-top:1px solid #eee;">
										
                                    </div>-->
                                    
                                    <!--<span style="color:#bbb;">- from <?= $project['contr'] ?> 
                                    member(s)</span> -->  
                                    <br /><br />
									<div class="btn-rounded" style="display:none"><a href="/listing/<?= $project['id'] ?>" 
									style="padding:15px 0 12px"><img 
                                        src="/static/client/fm_icon_mini_white.png" alt="FM" 
										style="height:25px; margin-bottom:3px;" 
										align="abscenter"> View this Mob</a>
                                    </div>  
									<?php if ($project['project_type_id']==2) { ?>
									<div class="progressbar" style="margin-bottom:10px">
										<div style="background:#00C617; height:10px; width:<?= $progress ?>%">&nbsp;</div>
									</div> 
									<div style="font-weight:500; background:#eee; padding:5px 10px;
										text-shadow:0px 1px 0px #fff; text-transform: uppercase;">
										FLIPMOB LISTING / STATUS: <b>
										<?php
										if ($project['is_active'] == 1) {
											echo "LIVE";
										} else {
											echo "DRAFT or COMPLETED";
										} ?></b>
									</div>
									<?php } else { ?>    
										<div style="font-weight:500; background:#eee; padding:5px 10px;
											text-shadow:0px 1px 0px #fff; text-transform: uppercase;">
											MARKETPLACE LISTING: <b>SELLING</b> / STATUS: <b>
											<?php
											if ($project['is_active'] == 1) {
												echo "LIVE";
											} else {
												echo "DRAFT or COMPLETED";
											} ?></b>
										</div>
									<?php }  ?>                             
                                </div>   
                            </div>  
                        </div>                                 	    
	            	</div>
	            	<div class="clear"></div>

            	<?php
            	endforeach;
            	?>
			
            </div>
			
                </div><!--end: .list-project-in-category -->
                <div style="clear:both"></div>
				<center style="color:#ccc;"><?php echo rand(); ?></center>
            </div><!--end: .search-result-page -->
        </div><!--end: .content -->
		
		<!--############################################# -->
		<!--##########  SIDEBAR STARTS HERE  ############ -->
		<!--############################################# -->
		
		<div class="sidebar grid_2" style="display:none;">
            <!--end: .left-list-category -->
			<div style="font-size:15px; margin-top:10px; margin-bottom:0px; font-weight:300; padding-top:5px;">
				<!--<span style="color:#cd1000; font-weight:500">BETA</span>-->
				+Vote up the best deal glitches - and please verify the ones you&rsquo;ve actually tested
				and done!
				<a href="/faq" title="Learn more" style="color:#0477bf; font-weight:600">Learn more &raquo;</a>
            </div>
            
            <?php if ($_SESSION['loggedin']) : ?>
                <br />
                 <a href="/project/add" style="color:#fff; display:block;"><div 
					 class="btn-blue" style="text-align:center; width:auto; padding: 15px 5px; max-width:90%;">
                    POST A DEAL GLITCH
                </div></a>
            <?php else : ?>
                <br />
                <a href="/auth/register" style="color:#fff; display:block;"><div 
					class="btn-blue" style="text-align:center; width:auto; padding: 15px 5px; max-width:90%;">
                    SIGN UP FREE
                </div></a>      
                <br />         

                <a href="/auth/register?mustbeloggedin" style="color:#fff; display:block;"><div 
					class="btn-red" style="text-align:center; width:auto; padding: 15px 5px; max-width:90%;">
					POST A DEAL-GLITCH
                </div></a>            
            <?php endif; ?>
            
            <br />
            <div class="left-list-category" style="padding-left:0px;">
                <h4 class="rs title-nav" style="margin-bottom:0px; padding-bottom:0px;">CATEGORIES</h4>
                <ul class="rs nav nav-category">
                	<li><a href="/category/all">View All <i class="icon iPlugGray"></i></a></li>
                </ul>
                <ul class="rs nav nav-category">
                	<?php
                    foreach ($categories as $cat) {
						if ($cat['id'] == $cat_id) {
							$class = 'class="active"';
						} else {
							$class = '';
						}
                    ?>
                    <li <?= $class ?>>
	                	<a href="/project/categories/<?= $cat['id'] ?>">
                        <?= $cat['title'] ?>
						<span class="count-val" style="display:none;">(<?= $cat['count_groups'] ?>)</span>
                        <i class="icon iPlugGray"></i>
                        </a>
                    </li>
                    <?php
                    }
                    ?>
                </ul>
            </div><!--end: .left-list-category -->
            
			<!--<a href="//squaresellersunited.com/"><img src="/static/client/square_sellers_united_small_square.png" alt="SSU" /></a>-->
            <br />
            <div style="text-align:center; font-weight:300;">            
                 
                <br /><br />
                <ul style="font-weight:300;">
                    <!--
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    -->
                </ul>
                
            </div>

        </div><!--end: .sidebar -->
        <div class="clear"></div>
    </div><!-- CONTENT GRID_12 ENDS HERE -->
    <div class="clear"></div>
</div>
<div class="clear"></div>
	
<script>
var $= jQuery.noConflict();
</script>	
	
<script type="text/javascript">
$(document).ready(function() {
	
	// SCROLL CODE FOR STICKY MENU
//	$(window).scroll(function(e) {
//		//var $el = $('.wrap-top-menu');
//		var $mainmenu = $('.scrollmenu');
//
//		var standalone = window.navigator.standalone,
//		userAgent = window.navigator.userAgent.toLowerCase(),
//		safari = /safari/.test( userAgent ),
//		ios = /iphone|ipod|ipad/.test( userAgent );
//
//		if ($(this).scrollTop() > 60) {
//			//$el.css({'display': 'block'});
//			$mainmenu.css({'display': 'none'});
//		} else {
//			//$el.css({'display': 'none'});
//			$mainmenu.css({'display': 'block'});
//		}
//
//	});
	// SCROLL CODE ENDS 
	
//	setTimeout(function(){
//		$('.loader').hide();
//		$.ajax({
//			url: "",
//			context: document.body,
//			success: function(s,x){
//				$(this).html(s);
//			}
//		});
//	}, 1000);
	
	$("#loginfirst").click(function() {
		// $("#entercode").keyup(function(e){
		//$("#apply-ref").click(function(e){

		alert('Please login to post new deal-glitch...');
	}); 	

	$("#quickpost").click(function(e) {
//		if (! $("#check_terms").is(":checked")) {
//			e.preventDefault();
//			var confirm_box = confirm('You must check the Terms checkbox.');
//			return false;
//		}

		if (! $("#quicktitle").val().length) {
			e.preventDefault();
			alert('You must enter Deal Glitch Title/Name.');
			return false;
		}

		if (! $("#quickcat").val().length) {
			e.preventDefault();
			alert('You must choose a Category/Type.');
			return false;
		}

		if (! $("#descrip").val().length) {
			e.preventDefault();
			alert('You must enter quick, simple description.');
			return false;
		}

		return true;
	});
});
</script>	

<!-- 6. HOW WE DO IT - MORE ABOUT APPWRAPR -->
<div style="display:none;">
<div id="moreaboutfeatures" class="" style="max-width:850px;"><!-- max-width:550px; removed -->
    <div class="overlay-bl-bg"></div>
    <div class="container_6 pop-content" style="">
        <div class="" style="">
            <div class="form login-form" style="">          
				<!-- CONTENT CONTAINER STARTS HERE -->
				<div class="box-white" style="border:0px; height:auto; padding:0px; margin-top:-30px !important;">					
					<div style="background:#fff; padding:25px; color:#222; font-size:15px;
					text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">	
					
					<h1 style="font-weight:300; color:#222; margin-bottom:0px;">How We Do It</h1>
					Note: This approach below is optional and mostly meant to help pull/display important pages from your 
					website inside your App (that you may not want to pay to fully re-create as an App feature). We also 
					now have the ability to create fully native, mobile app content pages (ie. without the need for using 
					<i>any</i> of your website pages!).
					
					<h2 style="color:#ff0000;">Image 1 (The Mobile Website)</h2>
					
					Any responsive (ie. mobile-friendly) website typically will look like Image 1.
					<br /><br />
					If your website isn&rsquo;t responsive (ie. mobile-friendly; ie. a mobile website), then no worries, 
					we can take care of that. However, if your website <i>is</i> mobile-friendly then we can do a quick 
					(optional) upgrade/optimization to turn it into Image 2 (ie. a fully functioning Web App).
					
					<h2 style="color:#ff0000;">Image 2 (Web App Optimization)</h2>
					
					Mostly what we&rsquo;ll do to optimize your website (or mobile website):
					<br /><br /> 
					1) Add some cushion to your top header, so when your website is opened inside
					a mobile app, the phone&rsquo;s battery info and time don&rsquo;t run into your logo, etc.
					<br /><br />
					2) Make sure all your links stay inside of the Web App and App (ie. something most good developers don&rsquo;t 
					even know is possible).
					<br /><br />
					3) Make external links bust outside of the App (otherwise the user could get trapped with no way to get back). 
					Note: We have some premium upgrades that give you your own custom browser (sort of like Facebook) where when
					your users open an external link, they can simply hit the X to close it and still be right on the same page 
					in your App. 
					<br /><br />
					4. And, last, but certainly not least - we make your mobile website - full screen! Meaning it'll take up the 
					entire phone&rsquo;s screen. Notice how in Image 1, there&rsquo;s a top browser/URL bar - <i>and</i> a 
					short-cut/bookmarks bar.
					<br /><br />
					All of these things take away from the immersive experience - not to mention valuable screen real estate when
					your users are using your website.
					<br /><br />
					
					<h2 style="color:#ff0000;">Image 3 (Native Mobile App)</h2>
					
					Finally, once your website or mobile website is web-app optimized and capable we can then open any of your 
					web pages inside your custom, mobile app (Image 3) and they&rsquo;ll look and feel just like they were 
					built inside the App to begin with! (and of course for extra, we can even make your mobile website style 
					identical to your mobile app, so no one can tell the difference!)					
					<br /><br />		
					The best part is the optimization process to your website (or mobile site) is super fast (usually about 
					30 minutes on average) and optional; And, the rest of the App Wrapr design, compile and submission process 
					usually takes less than 24 hrs (depending on our current orders/load; and not including App Store Approval 
					Times, which are about another 48 hours on average).
					<br /><br />
					Another interesting thing is - we don&rsquo;t even need access to your website to wrap it IN an &#923;pp 
					Wrapr. We just need to know the URL(s) of the pages you want to show inside your App. 
					So if you have an existing web developer you can&rsquo;t get in touch with - it doesn&rsquo;t even
					matter!	
					<br /><br />

						<br /><br /><br />
						<center>
							<span style="font-size:18px; color:#ff6600">Call or email us now to get started<br />
								<strong>1-844-484-4627 (1-844-4THINAPP)</strong> or <strong>contact@getthinapp.com</strong>
							</span>
						</center>
					</div>
				</div>
            </div>
        </div>
    </div>
</div>
</div>

 <script>
	 $(document).ready(function() {
		 //Preloader
		 $(window).on("load", function() {
			 preloaderFadeOutTime = 50;
			 function hidePreloader()
			 {
				 var preloader = $('.loader');
				 preloader.fadeOut(preloaderFadeOutTime);
			 }
			 hidePreloader();
		 });
	 });
 </script>
	
<?php include 'views/_footer.tpl.php'; ?>