<?php include 'views/_header2.tpl.php'; ?>
<style type="text/css">
	#ausection { height:425px; }
	.auimg { position:relative; display:inline-block; 
		float:left; width:425px; background:#eee; height:425px; overflow:hidden; 
	}
	.aucon { position:relative; display:inline-block; float:left; width: 500px; padding:0 100px 25px 25px; 
		font-size:15px; font-family: 'Montserrat-Light', Raleway,Oswald, sans-serif; color:#888;
	}
	.aumor { position:relative; display:inline-block; float:right; width:250px; background:none; 
		height:425px; line-height:425px; text-align:left; font-size:28px; 
		background: url(/static/images/big-arrow-gray.png) no-repeat center center; background-size:50%; color:#aaa;
	}

	.btn-flat {
	  background: #3498db;
	  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
	  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
	  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
	  background-image: -o-linear-gradient(top, #3498db, #2980b9);
	  background-image: linear-gradient(to bottom, #3498db, #2980b9);
	  webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 1px 1px rgba(0,0,0,.4);
	  box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 1px 0px rgba(255,255,255,.4);
	  -webkit-border-radius: 3;
	  -moz-border-radius: 3;
	  border-radius: 3px;
	  font-family: Montserrat-Light,Arial,sans-serif;
	  text-shadow:0px -1px 1px rgba(0,0,0,.3);
	  color: #ffffff;
	  font-size: 13px;
	  font-weight:300;
	  padding: 7px 12px 7px 12px;
	  border: solid #2980b9 0px;
	  text-decoration: none;
	}
	.btn-flat:hover {
	  background: #3cb0fd;
	  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
	  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
	  text-decoration: none;
	}
	#gallery-brands, #gallery-models {
		width: 49.5%; padding:0px !important; max-height:350px; float:left; background:#000; margin-bottom:20px;
	}
	h2.common-title { font-weight:400; }

/* ######################### */
/*         < 1091px          */
/* ######################### */

@media screen and (max-device-width:  1091px), screen and (max-width:  1091px) {
	#ausection { height:425px; overflow:hidden; }
	.auimg { position:relative; float:left; display:inline-block; width:50%; }
	.aucon { position:relative; float:left; display:inline-block; width:50%; 
	  padding:0; overflow:hidden; max-height:425px; }
	.aumor { display:none; }	
}

/* ######################### */
/*       Small Tablets       */
/* ######################### */

@media (max-width: 768px) {
	#ausection { height:auto; }
	.auimg { position:relative; display:block; width:100%; }
	.aucon { position:relative; display:block; width:auto; padding:0 25px 0 25px; overflow:hidden; }
	.aumor { display:none; }	
	#logoimgs img { height:20px; width:auto; }
}

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

@media (max-width: 480px) {
	#gallery-brands, #gallery-models {
		width: 100%; padding:0px !important; max-height:350px; display:block; background:#000; margin-bottom:20px;
	}
	#ausection { height:auto; }
	.auimg { position:relative; display:block; width:100%; }
	.aucon { position:relative; display:block; width:100%; padding:25px; }
	.aumor { display:none; }	
}
</style>

<?php if ($website_options['enable_homepage_slider']) : ?>

    <div id="home-slider">
        <div class="md-slide-items md-slider" id="md-slider-1" data-thumb-width="105" data-thumb-height="70">
			<div class="md-slide-item slide-0" data-timeout="6000">
				<div class="md-mainimg"><img src="/<?= $website_options['homepage_slider_img_1'] ?>" alt="" style="width:100%; height:auto;"></div>
				<div class="md-objects" style="margin-left:100px;">
					<div class="md-object slide-with-background" data-x="20" data-y="58" data-width="500" data-height="170" data-padding-top="30" data-padding-bottom="30" data-padding-left="35" data-padding-right="35" data-start="300" data-stop="3600" data-easein="random" data-easeout="keep">
						<h2 class="rs slide-title"><?= $website_options['homepage_slider_title_1'] ?></h2>
						<p class="rs slide-description2"><?= $website_options['homepage_slider_text_1'] ?></p>
					</div>
                    <!--<a href="<?= $website_options['homepage_slider_url_1'] ?>" class="btn btn-gray">Learn more</a>-->
				</div>
			</div>
			<div class="md-slide-item slide-1" data-timeout="6000">
				<div class="md-mainimg"><img src="/<?= $website_options['homepage_slider_img_2'] ?>" alt=""></div>
				<div class="md-objects" style="margin-left:100px;">
					<div class="md-object rs slide-title" data-x="20" data-y="108" data-width="390" data-height="30" data-start="700" data-stop="5500" data-easein="random" data-easeout="random">
						<p><?= $website_options['homepage_slider_title_2'] ?></p>
					</div>
					<div class="md-object rs slide-description2" data-x="20" data-y="220" data-width="390" data-height="100" data-start="1400" data-stop="4500" data-easein="random" data-easeout="random">
						<p><?= $website_options['homepage_slider_text_2'] ?></p>
					</div>
					<!--<div class="md-object" data-x="454" data-y="44" data-width="327" data-height="268" data-start="1000" data-stop="5500" data-easein="random" data-easeout="random" style=""><img src="/static/images/ex/slide1_1.png" alt="Responsive" width="327" height="268" /></div>
					<div class="md-object" data-x="628" data-y="142" data-width="298" data-height="176" data-start="1600" data-stop="5100" data-easein="random" data-easeout="random" style=""><img src="/static/images/ex/slide1_2.png" alt="Responsive" width="298" height="176" /></div>
					<div class="md-object" data-x="837" data-y="169" data-width="119" data-height="149" data-start="2200" data-stop="4800" data-easein="random" data-easeout="random" style=""><img src="/static/images/ex/slide1_3.png" alt="Responsive" width="119" height="149" /></div>
					<div class="md-object" data-x="809" data-y="208" data-width="59" data-height="114" data-start="2800" data-stop="4500" data-easein="random" data-easeout="random" style=""><img src="/static/images/ex/slide1_4.png" alt="Responsive" width="59" height="114" /></div>
					-->
				</div>
			</div>
			<div class="md-slide-item slide-2" data-timeout="4000">
				<div class="md-mainimg"><img src="/<?= $website_options['homepage_slider_img_3'] ?>" alt="" style="width:100%; height:auto;"></div>
				<div class="md-objects" style="margin-left:100px;">
					<div class="md-object slide-with-background" data-x="20" data-y="58" data-width="500" data-height="170" data-padding-top="30" data-padding-bottom="30" data-padding-left="35" data-padding-right="35" data-start="300" data-stop="3600" data-easein="random" data-easeout="keep">
						<h2 class="rs slide-title"><?= $website_options['homepage_slider_title_3'] ?></h2>
						<p class="rs slide-description2"><?= $website_options['homepage_slider_text_3'] ?></p>
					</div>
				</div>
			</div>
		</div>
    </div><!--end: #home-slider -->

<?php endif; ?>

<?php if (!empty($_GET['msg'])) : ?>
<p style="color:#f00;"><b><?= $_GET['msg'] ?></b></p>
<?php endif; ?>

    <div class="home-feature-category" style="background:#fff; border:none; padding:15px 0 7px;">
        <div id="logoimgs" class="container_12 clearfix">
		<center>
				<?php
				foreach ($logos as $logo) { 
				?>						
						<img src='/<?= $logo['image'] ?>' alt='<?= $logo['title'] ?>' style='margin-right:20px; margin-bottom:15px;' />
				<?php
				}
				?>	
		</center>
		</div>
	</div>

    <div class="home-feature-category" style="background:none; border:none;">
        <div class="container_12 clearfix">
            <div class="grid_4 marked-category blockit" style="background:none; border:none;">

				<div class="wrap-title clearfix">
					<h2 class="title-mark rs" style="font-family:Raleway,Oswald,sans-serif; text-shadow:0px 1px 0px #fff;">
						Custom Header Title <span class="fc-orange"><?= $featured_project['category']['title'] ?></span>
					</h2>
				</div>
				
				<?php if ($website_options['custom_text_0']) : ?>
					<p><?= $website_options['custom_text_0'] ?></p>
				<?php endif; ?>		
				
				<a href="#"class="btn-flat">Action Button &raquo;</a>

            </div><!--end: .left-lst-category -->
            <div class="grid_8 marked-category blockit">
			
				<!-- CUSTOM CONTENT BLOCK STARTS -->
				<div class="wrap-title clearfix">
					<h2 class="title-mark rs" style="font-family:Raleway,Oswald,sans-serif; text-shadow:0px 1px 0px #fff;">
						Custom Title Goes Here <span class="fc-orange"><?= $featured_project['category']['title'] ?></span>
					</h2>
				</div>
				<!-- enable_feature_1 -->
				<?php if ($website_options['custom_text_1']) : ?>
					<p><?= $website_options['custom_text_1'] ?></p>
				<?php endif; ?>				
				<div class="clear"></div>
				<!-- CUSTOM CONTENT BLOCK ENDS -->				
            </div><!--end: .marked-category -->
            <div class="clear"></div>
        </div>
    </div><!--end: .home-feature-category -->
	
	<div class="clear"></div>

	<!--<center><div class="arrow-up"></div></center>-->
	<div class="fwc testimonials">	
        <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;">
					Testimonials
				</h2>				
				<ul style="list-style:none;">
				<?php
				foreach ($testimonials as $tes) { 
				?>
					<li class="quotes" style="width:auto;">			
						<strong><?= $tes['title'] ?></strong>
						<br /><br />
						<?= $tes['content'] ?>
						<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>
	
    <div class="home-discover-friends" style="display:none;">
        <div class="container_12" style="max-width:960px;">
            <div class="row-friends">
            This section is an exclusive social connect feature, powered by Facebook API. Users can sign up or log in with their Facebook Account and the user thumbnails
            below will actually show/rotate real users who sign up from your site.
            <br /><br />
            	<?php
            	for ($x = 0; $x < 8; $x++) {
					$avatar = $avatars[$x];
					echo "<a class='thumb-avatar' href='/profile/{$avatar['user_slug']}'><img src='".getThumb($avatar['image'])."' alt='{$avatar['name']}'/></a>";
				}
            	?>
                <div class="clear"></div>
            </div>
            <div class="row-friends row-connect-fb">
            	<div class="fbthumb">
                <?php
				$avatar = $avatars[9];
				echo "<a class='thumb-avatar' href='/profile/{$avatar['user_slug']}'><img src='".getThumb($avatar['image'])."' alt='{$avatar['name']}'/></a>";
            	?>
            	</div>
                <div class="connect-fb" style="margin-right:1px;">
                    <p class="rs description">Discover + Review great content with your friends!</p>
                    <a href="/auth/loginFacebook" class="btn btn-fb">Connect With Facebook</a>
                </div>
                <div class="fbthumb">
                <?php
				$avatar = $avatars[10];
				echo "<a class='thumb-avatar' href='/profile/{$avatar['user_slug']}'><img src='".getThumb($avatar['image'])."' alt='{$avatar['name']}'/></a>";
            	?>
            	</div>
                <div class="clear"></div>
            </div>
            <div class="row-friends">
			<?php
            	for ($x = 10; $x < 18; $x++) {
					$avatar = $avatars[$x];
					echo "<a class='thumb-avatar' href='/profile/{$avatar['user_slug']}'><img src='".getThumb($avatar['image'])."' alt='{$avatar['name']}'/></a>";
				}
            	?>
                <div class="clear"></div>
            </div>
        </div><!-- END OF 12 COLUMN CONTAINER -->
    </div><!--end: .home-discover-friends -->
    <div class="additional-info-line" style="background: url(/static/images/bgsquares.jpg);">
        <div class="container_12">
            <div class="grid_9">
                <h2 class="rs title">Lower Page Call To Action</h2>
                <p class="rs description">This is a great place to add a Call To Action or remind users to do something you want them to do.</p>
            </div>
            <div class="grid_3 ta-r">
                <a class="btn bigger btn-red" href="/about/">Learn more &raquo;</a>
            </div>
            <div class="clear"></div>
        </div>
    </div><!--end: .additional-info-line -->
	
	<!-- ABOUT US SECTION -->
	
	<div id="ausection" class="" style="background:#fff; overflow:hidden;">	
			<div class="auimg">
				<img src="/static/images/au-img.jpg" alt="About Us" style="width:100%; height:auto;" />
			</div>
            <div class="aucon">
				<h2 style="font-family: Montserrat-Light, Raleway,Oswald, sans-serif; font-size:36px; font-weight:300; 
				text-align:left; color:#888;">
					connect with us
				</h2>
				You can put an awesome, short about description right here - or, a call to action...
				<br /><br />
				Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the 
				industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type 
				and scrambled it to make a type specimen book. 
				<br /><br />
				It has survived not only five centuries, but also the 
				leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s 
				with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
				publishing software like Aldus PageMaker including versions of Lorem Ipsum...				
				<br /><br />
				<div class="clear"></div>
				<br /><br />
			</div>
			<div class="aumor">
				<a href="#" title="Learn more">learn more</a>
			</div>
			<div class="clear"></div>			
		<div class="clear"></div>
	</div>
	
	<div class="clear"></div>	
	
	<!-- SOCIAL MEDIA ICONS SECTION -->
	
	<div class="home-socialicons">	
        <div class="container_12">
			<div class="grid_1">&nbsp;</div>
            <div class="grid_10">
				<h2 style="font-family: Montserrat-Light, Raleway,Oswald, sans-serif; font-size:36px; font-weight:300; 
				text-align:center;">
					connect with us
				</h2>				
				You can put an awesome, short about description right here - or, a call to action...
				<br /><br />
				<ul style="list-style:none; text-align:center;">
					<center>
					<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a></li>
					<li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i></a></li>
					</center>
				</ul>	
				<div class="clear"></div>
				<br /><br />
				<img src="/static/images/payment-logos-white.png" alt="Payment Types We Accept" style="width:270px; height:auto;" />
			</div>
			<div class="grid_1">&nbsp;</div>
			<div class="clear"></div>			
		</div>
		<div class="clear"></div>
	</div>
	
	<div class="clear"></div>	
	
	<!-- SOCIAL MEDIA ICONS SECTION ENDS AND FOOTER STARTS -->

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#gallery-brands, #gallery-models').royalSlider({
        fullscreen: {
            enabled: true,
            nativeFS: true
        },
        controlNavigation: 'bullets',
        slideshowEnabled:true,                 // Autoslideshow enabled
        slideshowDelay:2000,                    // Delay between slides in slideshow
        slideshowPauseOnHover:true,             // Pause slideshow on hover
        slideshowAutoStart:true,                // Auto start slideshow
        autoPlay: {
                enabled: true,
                stopAtAction: false,
                pauseOnHover: true,
                delay: 2500,
            },
        autoScaleSlider: true,
        autoScaleSliderWidth: 600,
        autoScaleSliderHeight: 400,
        transitionType: 'fade',
        loop: true,
        imageScaleMode: 'fit-if-smaller',
        navigateByClick: true,
        numImagesToPreload:2,
        arrowsNav:true,
        arrowsNavAutoHide: true,
        arrowsNavHideOnTouch: true,
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        globalCaption: false,
        globalCaptionInside: false,
        thumbs: {
            arrows: true,
            autoCenter: true,
            appendSpan: true,
            firstMargin: true,
            paddingBottom: 75,
            paddingLeft: 150
        }
    });
});
</script>

<?php
if ($_SESSION['loggedin']) : ?>

<?php if ($website_options['enable_homepage_nearby']) : ?>
    <script src='/static/js/googlemaps/getlocation-noconflict.js'></script>
<?php else : ?>
    <script src='/static/js/googlemaps/getlocation.js'></script>
<?php endif; ?>

<?php
endif; ?>

<?php include 'views/_footer.tpl.php'; ?>