    <!--
	<link rel="stylesheet" type="text/css" href="carousel/style.css">    
	<script src="carousel/modernizr.min.js" type="text/javascript"></script>
	<script src="carousel/native.js" type="text/javascript"></script>
    -->
    
    <style type="text/css">
		@media (min-width: 768px) {
			
			/* show 3 items */
			.carousel-inner .active,
			.carousel-inner .active + .carousel-item,
			.carousel-inner .active + .carousel-item + .carousel-item,
			.carousel-inner .active + .carousel-item + .carousel-item + .carousel-item  {
				display: block;
			}
    
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item,
			.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
				transition: none;
			}
    
			.carousel-inner .carousel-item-next,
			.carousel-inner .carousel-item-prev {
				position: relative;
				transform: translate3d(0, 0, 0);
			}
    
			.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: absolute;
				top: 0;
				right: -25%;
				z-index: -1;
				display: block;
				visibility: visible;
			}
    
			/* left or forward direction */
			.active.carousel-item-left + .carousel-item-next.carousel-item-left,
			.carousel-item-next.carousel-item-left + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item,
			.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(-100%, 0, 0);
				visibility: visible;
			}
    
			/* farthest right hidden item must be abso position for animations */
			.carousel-inner .carousel-item-prev.carousel-item-right {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				display: block;
				visibility: visible;
			}
    
			/* right or prev direction */
			.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
			.carousel-item-prev.carousel-item-right + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item,
			.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
				position: relative;
				transform: translate3d(100%, 0, 0);
				visibility: visible;
				display: block;
				visibility: visible;
			}
		}

		/* Bootstrap Lightbox using Modal */
		#profile-grid { overflow: auto; white-space: normal; } 
		#profile-grid .profile { padding-bottom: 40px; }
		#profile-grid .panel { padding: 0 }
		#profile-grid .panel-body { padding: 15px }
		#profile-grid .profile-name { font-weight: bold; }
		#profile-grid .thumbnail {margin-bottom:6px;}
		#profile-grid .panel-thumbnail { overflow: hidden; }
		#profile-grid .img-rounded { border-radius: 4px 4px 0 0;}    
	</style>

	<?php
    echo '
	<link rel="stylesheet" type="text/css" href="'.$thisPage.'carousel/slick.css" />
	<link rel="stylesheet" type="text/css" href="'.$thisPage.'carousel/slick-theme.css" />

    <section class="layout-centered backgroundMedium" data-modul="M00613">
        <div class="row spacerRow">
            <div class="rowInner">
                <div class="teasers">
					<p style="padding-top:8px">
						<img class="spacerRowImage" src="'.$thisPage.'images/spacer-bg.png" alt="" title="">
                	</p>
					<p style="padding:0; margin:0">
						<h1 style="padding:0px 0px 25px 0px; margin:0">
							<a class="black" href="https://www.instagram.com/tradexpoid/" target="_blank">
								FOLLOW US ON INSTAGRAM @TRADEXPOID
							</a>
						</h1>
					</p>
				</div>
            </div>
        </div>        
	</section>
	
	<link href="'.$thisPage.'bootstrap/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
	<script src="'.$thisPage.'bootstrap/bootstrap.min.js"></script>';
	?>
	<script type="text/javascript">
		window.alert = function(){};
		var defaultCSS = document.getElementById('bootstrap-css');
		function changeCSS(css){
			if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
			else $('head > link').filter(':first').replaceWith(defaultCSS); 
		}
		$( document ).ready(function() {
			var iframe_height = parseInt($('html').height()); 
			window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
		});
    </script>        
    <?php echo '<script src="'.$thisPage.'bootstrap/bootstrap.min.js"></script>'; ?>
    <script type="text/javascript">
        window.alert = function(){};
        var defaultCSS = document.getElementById('bootstrap-css');
        function changeCSS(css){
            if(css) $('head > link').filter(':first').replaceWith('<link rel="stylesheet" href="'+ css +'" type="text/css" />'); 
            else $('head > link').filter(':first').replaceWith(defaultCSS); 
        }
        $( document ).ready(function() {
          	var iframe_height = parseInt($('html').height()); 
          	window.parent.postMessage( iframe_height, 'https://bootsnipp.com');
        });
    </script>

    <?php
	echo '
    <div class="container-fluid">
		<img class="spacerRowImage" src="'.$thisPage.'images/spacer-bg.png" alt="" title="">
		<div style="height:30px"></div>
		<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
			<div class="carousel-inner row w-100 mx-auto" role="listbox">';
				$counter = 0;
				$json = file_get_contents($json_link);
				
				if (is_localhost()) {
					$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);
				} else {
					$obj = json_decode(preg_replace('/("\w+"):(\d+)/', '\\1:"\\2"', $json), true);	
				}
				if (isset($obj['data'])) {
					foreach ($obj['data'] as $post) {
						$pic_text = (isset($post['caption']['text']) ? $post['caption']['text'] : '');
						$pic_text = str_replace("'", "\'", $pic_text);
						$pic_link = (isset($post['link']) ? $post['link'] : '');
						$pic_like_count = (isset($post['likes']['count']) ? $post['likes']['count'] : '');
						$pic_comment_count = (isset($post['comments']['count']) ? $post['comments']['count'] : '');
						$pic_src = '';
						if (isset($post['images']['standard_resolution']['url'])) {
							$pic_src = str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
						}			
						$pic_link = "window.open('{$pic_link}')";			
						echo '
						<div style="cursor:pointer;" onclick="'.$pic_link.'" class="carousel-item col-md-3 '.($counter==0 ? ' active ' : '').'">
							<div class="panel panel-default">
								<div class="panel-thumbnail crop3">';
									echo "
										<img class='img-fluid mx-auto d-block' src='{$pic_src}' border='0' />
									";
									echo '
										<div class="stats-insta">
											<p>
												<i class="fa fa-heart"></i> '.$pic_like_count.'
												&nbsp; &nbsp;
												<i class="fa fa-comment"></i> &nbsp; '.$pic_comment_count.'
											</p>
										</div>
								</div>
							</div>
						</div>';
						$counter++;
					}
				}
				echo '
			</div>
			<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
		<div style="height:30px"></div>
		<img class="spacerRowImage" src="'.$thisPage.'images/spacer-bg.png" alt="" title="">
	</div>';
	?>
	
	<script type="text/javascript">	
		$('#carouselExample').on('slide.bs.carousel', function (e) {
    		var $e = $(e.relatedTarget);
    		var idx = $e.index();
    		var itemsPerSlide = 4;
    		var totalItems = $('.carousel-item').length;
			if (idx >= totalItems-(itemsPerSlide-1)) {
				var it = itemsPerSlide - (totalItems - idx);
				for (var i=0; i<it; i++) {
					// append slides to end
					if (e.direction=="left") {
						$('.carousel-item').eq(i).appendTo('.carousel-inner');
					}
					else {
						$('.carousel-item').eq(0).appendTo('.carousel-inner');
					}
				}
			}
		});

  		$('#carouselExample').carousel({ 
			interval: 2000
        });

  		$(document).ready(function() {
			/* show lightbox when clicking a thumbnail */
    		$('a.thumb').click(function(event){
      			event.preventDefault();
      			var content = $('.modal-body');
      			content.empty();
        		var title = $(this).attr("title");
        		$('.modal-title').html(title);        
        		content.html($(this).html());
        		$(".modal-profile").modal({show:true});
    		});
  		});	
    </script>    
	<!-- 
    <section class="layout-centered" style="background-color:#033b5f;" data-modul="M00613">
        <div class="row spacerRow">
            <div class="rowInner">
                <div class="teasers">
                	<div class="col l-col12 m-col12 s-col12">
                    	<div class="teasers">
                        	<div class="col l-col12 m-col12 s-col12" style="background-color:#ffffff">
                                <img class="spacerRowImage" src="<?php echo $thisPage; ?>images/spacer-bg.png" alt="" title="" />
                                <div class="teasers slider autoplay" style="margin:0; padding:0">
                                    <?php
									/** 
									$json = file_get_contents($json_link);
									if (is_localhost()) {
										$obj = json_decode($json, true, 512, JSON_BIGINT_AS_STRING);
									} else {
										$obj = json_decode(preg_replace('/("\w+"):(\d+)/', '\\1:"\\2"', $json), true);	
									}
									if (isset($obj['data'])) {
										foreach ($obj['data'] as $post) {
											$pic_text = (isset($post['caption']['text']) ? $post['caption']['text'] : '');
											$pic_link = (isset($post['link']) ? $post['link'] : '');
											$pic_like_count = (isset($post['likes']['count']) ? $post['likes']['count'] : '');
											$pic_comment_count = (isset($post['comments']['count']) ? $post['comments']['count'] : '');
											$pic_src = '';
											if (isset($post['images']['standard_resolution']['url']))
												$pic_src = str_replace("http://", "https://", $post['images']['standard_resolution']['url']);
											//$pic_created_time=date("F j, Y", $post['caption']['created_time']);
											//$pic_created_time=date("F j, Y", strtotime($pic_created_time . " +1 days"));
											//echo "
											//<a class='' href='{$pic_link}' target='_blank'>
												//<img class='img-fluid' src='{$pic_src}' alt='{$pic_text}'>
											//</a>
											//";
											echo "
											<div class='crop2'>
												<a href='{$pic_link}' target='_blank'>
													<img class='object-fit_cover' src='{$pic_src}' alt='{$pic_text}'>
												</a>
											</div>
											";
										}
									}
									echo '
									<img class="spacerRowImage" src="'.$thisPage.'images/spacer-bg.png" alt="" title="">';
									**/
									?>
                                </div>
                        	</div>
                    	</div>
                    </div>
                </div>
            </div>
        </div>        
    </section>
    -->    

	<!-- 
	<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    -->
    